标签页视图不起作用

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

这个小提琴似乎正在起作用。