Question

I want to create a simple build menu with a tabbed view.
After i changed something yesterday night it doesn’t work any more.
The switch between the tabs is broken, the content of all tabs will be shown at the first tab

Snippet:

 <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

This line var pages = container.querySelectorAll(".tabpage"); returns a collection with length 0.

However, if you change it to var pages = document.querySelectorAll(".tabpage");, it works fine.

The reason is that your .tabpage aren’t children of your container (which is #tabContainer). Look at your HTML carefully (from your fiddle):

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

This fiddle appears to be working.