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>

Sample Code

Source

My Test Site

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

此fiddle似乎正在运作。

标签视图不起作用

1 个答案: