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/

Answer 2

您需要在包含内容的div之前编写包含ul的选项卡。如果您需要在内容之后或页面底部显示标签，则需要通过定位来实现。

Answer 3

我认为这是因为你没有在第二个例子中以正确的方式构建标签。我认为插件将单个选项卡内容注册为选项卡导航菜单的兄弟，当您将它们移动到不同的父项时，插件将无法工作。

但是，您可以在标签后移动来更改菜单的位置：http://jsfiddle.net/teddyrised/HwfF6/1/

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

Answer 4

你应该替换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>

如果您希望选项卡位于包装器内，请在伪标签之前使用。

.usual ul:before {
    content: ".";
}

示例：

JS FIDDLE

Answer 5

试试这个，

<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>

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

“菜单”选项卡按钮不起作用

5 个答案: