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

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;
}

普通 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"

  });
}

实际的代码非常短，但我尝试用尽可能多的注释来解释它。

我希望您发现它易于阅读并开始将其实现到您的项目中!

如果您有任何关于上述代码的任何进一步问题，请随时提出! 😉