选项卡视图不起作用

Tab View doesn't work

本文关键字：不起作用 视图 选项      更新时间：2023-09-26

我想创建一个带有选项卡视图的简单构建菜单。昨天晚上我换了东西后，它就不工作了。选项卡之间的切换被打破，所有选项卡的内容将显示在第一个选项卡

片段:

 <div id="builder">
    <div id="wrapper">
  <div id="tabContainer">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Page 1</li>
        <li id="tabHeader_2">Page 2</li>
        <li id="tabHeader_3">Page 3</li>
      </ul>
    </div>
    <div class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Pellentesque habitant morbi tristique senectus...</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <h2>Page 2</h2>
        <p>Pellentesque habitant morbi tristique senectus...</p>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Page 3</h2>
        <p>Pellentesque habitant morbi tristique senectus...</p>
      </div>
    </div>
  </div>
</div>

示例代码

来源

My Test Site

var pages = container.querySelectorAll(".tabpage");返回一个长度为0的集合。

但是，如果您将其更改为var pages = document.querySelectorAll(".tabpage");，则可以正常工作。

原因是你的.tabpage不是你的container的孩子(这是#tabContainer)。仔细查看你的HTML (从你的小提琴):

<div id="tabContainer">  <!-- this is what you set at "container" in JS -->
    <div class="tabs">
        <ul>
            <li id="tabHeader_1">Military</li>
            <li id="tabHeader_2">Supply</li>
            <li id="tabHeader_3">Research</li>
        </ul>
    </div>  <!-- .tabs -->
</div> <!-- #tabContainer -->
<div class="tabscontent">
    <div class="tabpage" id="tabpage_1"> <!-- this is NOT a child of #tabContainer -->

相关文章：