javascript - 选项卡视图不起作用

Question

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

片段：

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

示例代码

资源

我的测试站点

Answer 1

此行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 -->

这个小提琴似乎正在工作。