標籤視圖不起作用

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");返回一個集合ngth 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似乎是工作。