javascript - 菜单选项卡按钮不起作用

Question

我有一个基于 idTabs.js 的 CSS 菜单选项卡, 它有 3 个按钮，可以在菜单上显示的内容之间切换 <div> -

<div>   
          <div id="usual1" class="usual">
            <ul>
              <li><a href="#tab1" class="">Tab 1</a></li>
              <li><a href="#tab2" class="selected">Tab 2</a></li>
              <li><a href="#tab3" class="">Tab 3</a></li>
            </ul>
            <div id="tab1" style="display: none;">This is tab 1.</div>
            <div id="tab2" style="display: block;">More content in tab 2.</div>
            <div id="tab3" style="display: none;">Tab 3 is always last!</div>
          </div>
          <script type="text/javascript">
            $("#usual1 ul").idTabs();
          </script>

      </div>

( here its demo )

现在我尝试对其进行一些编辑，使按钮位于菜单 div 下方。 -

<div>
          <div id="usual1" class="usual">
            <div id="tab1" style="display: none;">This is tab 1.</div>
            <div id="tab2" style="display: block;">More content in tab 2.</div>
            <div id="tab3" style="display: none;">Tab 3 is always last!</div>
          </div>  
      </div>
      <div class="usualBottom">
          <ul>
                  <li><a href="#tab1" class="">Tab 1</a></li>
                  <li><a href="#tab2" class="selected">Tab 2</a></li>
                  <li><a href="#tab3" class="">Tab 3</a></li>
          </ul>
      </div>
      <script type="text/javascript">
            $("#usual1 ul").idTabs();
      </script>

但按钮停止工作，意味着它们不会切换菜单内容。

( here its demo )

如何解决？

Answer 1

我认为您的选择器有误。而不是 $("#usual1 ul").idTabs(); 它应该是 $(".usualBottom ul").idTabs(); 。看看它是否有效。

演示:http://jsfiddle.net/3Njy5/3/