Question

我有2个div，彼此左右。左侧是内部<li>项<a>的列表。

右边是一系列<div>，display: none;作为初始课程。我编写了一个函数来显示这些<div>，因为它们在左侧选择了相应的<li>项。左侧列表的HTML是：

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" onclick="toggle_visibility('item1');" href="javascript:void(0)">Item 1</a>
    </li> 
    <li class="nav-item">
        <a class="nav-link" onclick="toggle_visibility('item2');" href="javascript:void(0)">Item 2</a>
    </li>
</ul>

右边列表的HTML是：

<div class="container">
    <div id="item1">
        <h2 class="text-center">Item 1</h2>
    </div>
    <div id="item2">
        <h2 class="text-center">Item 2</h2>
    </div>
</div>

我的javascript函数是：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}

发生的事情是他们打开和关闭都很好，但是当他们点击时他们会叠加在一起。我希望他们做的是选择<div>取代所显示的内容，而不是将它们显示在彼此之上。

这只是一个示例，我需要选择其中的大约8个链接，并根据需要显示div。

我是javascript的新手，我之前编写了while循环，并假设我需要这样做并将所有这些作为数组循环。但是我要检查什么，如何在选择另一个时删除显示屏？

我也完全接受这样一种可能性，即我使它变得比它应该更复杂。

提前感谢您的帮助。

Answer 1

首先;我强烈建议继续使用JavaScript，不要失望，问别人，了解更多信息，不要停止学习！

我提出了一个解决方案，允许您根据需要显示/隐藏div。除此之外，它是100％动态的，您可以根据需要添加任意数量的链接/ div，而无需额外的努力！

这是Live Preview Pen。 我使用引导网格来增强UI

无论如何，这里是没有额外内容的代码：

<强> HTML

<!-- Toggle Links -->
<div>
  <ul>
    <li><a href="#" class="toggle">Item #1</a></li>
    <li><a href="#" class="toggle">Item #2</a></li>
    <li><a href="#" class="toggle">Item #3</a></li>
  </ul>
</div>

<!-- Show/Hide Divs -->
<div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<强> CSS

.item {
  display: none;
}

Vanilla JS

// Select All Links
const toggleLinks = document.querySelectorAll(".toggle");

// Select All divs
const allDivs = document.querySelectorAll(".item");

// Add a `click` event to each link
for(let i = 0; i < toggleLinks.length; i++) {
  toggleLinks[i].addEventListener("click", function(e) {
    e.preventDefault(); // To avoid reloading the page

    // Make sure that ALL divs are hidden
    for(let x = 0; x < allDivs.length; x++) {
      allDivs[x].style.display = "none"
    }

    // Show only ONE div based on the triggered link's index
    const displayDiv = allDivs[i];
    // You can display the div directly without `displayDiv` variable, but it is made for better readability only!
    displayDiv.style.display = "block";
    // Like this: allDivs[i].style.display = "block"

  });
}

实际代码非常简短，但我试着用尽可能多的评论解释它。

我希望您觉得它很容易阅读并开始在您的项目中实现这一点！

如果您有任何问题，请随时询问有关上述代码的任何其他问题！

Answer 2

如果您使用的是JQuery

$("div:not(#id)").css("display", "none"); $("#id").css("display", "block");

或

您正在使用纯JS

document.querySelector("div:not(#id).style.display = none") document.getElementById(#id).style.display = block

当选择其他元素时，javascript切换类关闭

2 个答案: