1 
Note: I want to use .tabs() and avoid NOT using .tabs(), and writing everything 
separately to handle the fades and tab selections like others have found.

タイトルが示すように、ページの2 つの別々の位置にタブのリストを表示したいのですが、それらを同じデータで連携させたいと考えています。

問題は、クラスで 2 つの ul を設定するnavと競合が発生し、一度に 2 つのタブ (左側と右側) を選択できることです。

タブの問題 各タブ セットが連動しておらず、個別に選択できることがわかりますか?

機能する単一のタブ セットのコード

HTML

<div id="content">
    <!-- Tab data gets inserted here -->
    <div id="overlay"><div class="overlay"></div></div>

    <!-- First Tab Set -->
    <!-- NOTE: This will appear on the left -->
    <div class="navigation nav-left">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Data for the tabs - this works! -->
   <div id="container">
       <!-- Link 1 Tab -->
       <div>This is data for Link 1</div>
       <div>This is data for Link 2</div>
   </div>
</div>

jQuery

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

ご覧のとおり、上記の jQuery は、ul.nav各 div に#container個別にリンクするためのタブを設定します。ページの左側にあるこの 1 つのタブ セットで機能します。

難しい部分

これを変更して、ページに2セットのタブを許可するにはどうすればよいですか?

ちょっと待ってください<div class="navigation nav-right">--これらのタブをページの右側に保持するnav-right に注意してください。

この 2 番目のタブのセットは、最初のセットと一緒に機能する必要があるため、一度にアクティブにできるタブは 1 つだけであり、他のタブの選択をキャンセルします。

私のコードが2つのタブセットの同時実行の問題を引き起こしている

HTML

    <!-- First Tab Set -->
    <!-- NOTE: This will appear on the left -->
    <div class="navigation nav-left">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Second Tab Set (Attempt) -->
   <!-- NOTE: I want nav-right here -->
   <div class="navigation nav-right">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Data for the tabs -->
   <div id="container">
       <!-- Link 1 Tab -->
       <div>This is data for Link 1</div>
       <div>This is data for Link 2</div>
       . . .
       <div>This is data for Link 5</div>
   </div>

最終的な考え

私はむしろ、独自の jQuery Tabs 関数をfadeIn()andで記述する必要がないことを望んでいましたfadeOut()- これを機能させるにはどうすればよいですか?

4

1 に答える 1

0

のベンダーによると、.tabs()彼は、同じ DIV セットにリンクしているタブの複数のインスタンスを更新することに「煩わされることはありません」。

私の唯一の選択肢は、自分のコードをロールバックして、自分の を完全に廃止して実行.tabs()することでした。関数は、大きな関数呼び出し内で結合されました。.fadeOut().fadeIn().load()

これの利点は、すべてがどのように機能するかを正確に知っており、将来簡単に追加できることです。少し時間をかけて自分で行うことをお勧めします (それほど長くはかかりません)。

所有者がこの機能を含めることを決定した場合は、投稿を更新しますが、2013 年初頭の時点では、現在.tabs()この方法でプラグインを使用する方法はありません.

于 2013-02-21T12:30:32.110 に答える