0

我有一个基于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>

（这里是它的演示）

现在我尝试对其进行一些编辑，使按钮位于菜单下方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>

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

（这里是它的演示）

如何解决？

4

5 回答 5

1

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

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

于 2014-05-05T10:19:06.350 回答
0

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

于 2014-05-05T10:16:34.510 回答
0

我相信这是因为您在第二个示例中没有以正确的方式构建选项卡。我认为该插件将各个选项卡内容注册为选项卡导航菜单的同级，并且当您将它们移动到不同的父级时，该插件将不起作用。

但是，您可以通过在选项卡之后移动菜单来更改菜单的位置：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>
于 2014-05-05T10:17:41.633 回答
0

您应该替换 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小提琴

于 2014-05-05T10:22:22.690 回答
0

像这样试试

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

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

于 2014-05-05T10:45:24.797 回答