Question

根据点击显示和隐藏多个 Div

2022-08-18

1324

javascript

嗨，我有一段代码需要根据 ID 隐藏和显示 div。这行得通，但问题是我需要能够隐藏页面上具有相同 ID 的其他 DIVS。

我知道 ID 应该是唯一的，但是当我尝试使用 querySelectorAll 时，我的控制台显示

未捕获 TypeError：无法设置未定义的属性（设置“display”）“

未捕获 TypeError：无法读取未定义的属性（读取“className”）

我也很难只显示第一个选项卡，现在所有内容都会显示，直到单击按钮。

编辑：我找到了一个围绕容器元素的解决方案，它不是理想的解决方案，以防以后添加某些东西，但它有效。

仍然希望看到一个可以学习的解决方案，但感谢那些提供帮助的人。

<div class="swapMenuBlock">
  <ul class="side bar tabs" id="tab">
    <li class="tabButton" id="tabs1" onclick="showStuff('IV')">Ivs</li>
    <li class="tabButton" id="tabs2" onclick="showStuff('Injection')">Injections</li>
    <li class="tabButton" id="tabs3" onclick="showStuff('NAD')">NAD</li>
  </ul>

  <script type="text/javascript">
    // Get the tab element
    var btnContainer = document.getElementById("tab");

    // Get all buttons inside with tabbutton
    var btns = btnContainer.getElementsByClassName("tabButton");

    // Loop through the buttons and add the active class to the current/clicked button
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }

    // Toggle displays
    function showStuff(id) {
      document.getElementById("IV").style.display = "none";
      document.getElementById("Injection").style.display = "none";
      document.getElementById("NAD").style.display = "none";
      document.getElementById(id).style.display = "block";
    }
  </script>
</div>

Answer 1

Bug 的原因：-

当您的点击处理程序首次运行并搜索包含 active 类的标签时，会获取一个空数组，因为 html 没有带有 active 类的标签。

现在

var current = [];
current[0] = undefined; 
current[0].className =(undefined).className;

//and the console is showing you this error.
//Uncaught TypeError:
//Cannot read properties of undefined (reading 'className')

解决方案 ：-

只需将 active 类手动添加到任何一个 li 标签即可。像这样：-

<ul class="side bar tabs" id="tab">
    <li class="tabButton" id="tabs1" onclick="showStuff('IV')">Ivs</li>
    <li class="tabButton" id="tabs2" onclick="showStuff('Injection')">Injections</li>
    <li class="tabButton active" id="tabs3" onclick="showStuff('NAD')">NAD</li>
</ul>

Answer 2

ID 必须是唯一的。相反，为应该一起显示/隐藏的元素赋予相同的 CSS 类。然后，您可以查询具有该类的所有元素并显示/隐藏它们。

示例：

let foos = document.querySelectorAll(".foo")
document.querySelector("button").addEventListener("click", function() {
  foos.forEach(function(el){
    el.classList.toggle("hidden");
  });
});

.hidden { display:none; }

<button>Toggle</button>
<div class="foo">foo</div>
<div class="fooBar">fooBar</div>
<div class="foo">foo</div>
<div class="fooBar">fooBar</div>
<div class="foo">foo</div>
<div class="fooBar">fooBar</div>
<div class="foo">foo</div>
<div class="fooBar">fooBar</div>
<div class="foo">foo</div>