1

jQuery ツールのタブ プラグインを使用して、垂直タブ システムを実行しています (左側に垂直に積み上げられたタブ、右側に関連するコンテンツがあります)。

タブをクリックすると、右側のコンテンツが変化します。正常に動作します。

現在/アクティブなタブを常にリストの最初 (または一番上) のタブにする方法はありますか?

<div class="corpRespPod" id="notes">
        <ul class="tabs">
            <li><a href="#notes" title="Tab 1">Tab 1</a></li>
            <li><a href="#notes" title="Tab 2">Tab 2</a></li>
            <li><a href="#notes" title="Tab 3">Tab 3</a></li>
        </ul>
        <div class="panes">
            <div>
               Tab 1 content Here
            </div>
            ...
        </div>
</div>

それを起動する単純な JS:

    $("#notes .tabs").tabs("#notes .panes div");

つまり、「Tab 2」をクリックすると、明らかに current のクラスが追加されますが<li>、リストの最初にもなります。CSS または JS ソリューションのアイデアはありますか? ネイティブの jQuery Tools 機能にはないようです。

4

4 に答える 4

1

jQuery Toolsについてはよくわかりませんが、jQueryUIを使用すると非常に簡単なようです。

jQueryUIを使用してこのデモを確認してください。役立つ場合があります。

垂直タブjQuery

于 2012-05-30T16:15:35.773 に答える
1

jQuery を使用して DOM ノードを削除し、タブ リストの先頭に再度挿入します。jQuery の slideUp および/または slideDown メソッド (または別のアニメーション メソッド) を呼び出し、コールバックに依存してアニメーションを並べ替えることで、見栄えを良くすることができます。jQuery のエフェクトには、コールバックが組み込まれています。

于 2012-05-30T20:23:47.787 に答える
1 
<div class="corpRespPod" id="notes">
   <ul >
    <li class="tabs" id="firstTab"></li>
    <li class="tabs">Tab 1</li>
    <li class="tabs">Tab 2</li>
    <li class="tabs">Tab 3</li>
  </ul>
</div>

jQuery(document).ready(function (){
    $("#notes .tabs").tabs("#notes");
});

$(".tabs").click(function(){
    $("#firstTab").text($(this).text());
    $(this).hide();
    $(".tabs").not(this).show();
});​

これは、選択したタブが常に最初のタブになる方法です。DOM には常に 3 つのタブがあります。

編集:上記のコードをフィドル (http://jsfiddle.net/8pkXW/28/) と同期しました。今すぐプラグインして確認してください

于 2012-05-30T16:19:02.870 に答える
0

li.current の CSS は何ですか? 誤ってli.currentにposition:absoluteを配置したときに、これと同じことが起こりました。

于 2012-06-14T18:20:20.877 に答える