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

これは、2 番目の例で正しい方法でタブを作成していないためだと思います。プラグインは個々のタブのコンテンツをタブ ナビゲーション メニューの兄弟として登録すると思います。それらを別の親に移動すると、プラグインは機能しません。

ただし、メニューをタブの後ろに移動することで、メニューの位置を変更できます: 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 の前に、タブを含む ul を記述する必要があります。コンテンツの後またはページの下部にタブが必要な場合は、配置して行う必要があります。

于 2014-05-05T10:16:34.510 に答える
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 に答える