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

Question

嘿，我有这段代码需要根据 ID 隐藏和显示 div。 哪个有效，但问题是我需要能够在页面上隐藏具有相同 ID 的其他 DIVS。

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

未捕获的类型错误：无法设置未定义的属性（设置“显示”）”

未捕获的类型错误：无法读取未定义的属性（读取“类名”）

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

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

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

 <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

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

例子：

 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>

Answer 2

错误原因：-

当您的点击处理程序首次运行并搜索包含active class 的标签时，会得到一个空数组，因为 html 没有具有活动 class 的标签。

接着

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的 class 添加到任何一个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>