0

タブ付きのビューでシンプルなビルドメニューを作成したいと思います。昨夜何かを変えた後、それはもう動かない。タブ間の切り替えが壊れ、すべてのタブのコンテンツが最初のタブに表示されます

スニペット：

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

サンプルコード

ソース

私のテストサイト

4

1 に答える 1

0

この行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 -->

このフィドルは機能しているようです。

于 2013-01-21T14:52:56.237 に答える