0

jQuery UIタブを使用してインターフェイスを作成しましたが、要件の1つは、タブグループ内のすべてのページのコンテンツをページの下に同時に表示する「すべて」オプションを用意することでした。

私のタブはPHPから動的に生成されており、結果が次のようになるように各タブボタンにIDを付けています。

<li ><a id='tabProjectBrief' href="#section1">Project Brief</a></li>
<li ><a id='tabScorecard' href="#extra1">Scorecard</a></li>
<li ><a id='tabContributions' href="#section2">Contributions</a></li>
<li ><a id='tabOther' href="#section6">Other</a></li>
<li ><a id='tabAll' href="#all">All</a></li>

次に、JavaScriptに次のように表示されます。

$(document).ready(function() {
  $('#tabAll').click(function(){

    setTimeout("$('div.tabSection').removeClass('ui-tabs-hide')", 50);
  });
});

私はsetTimeout（）を使用しています。これは、タブが選択されると、jQuery UIが以前に選択されたタブにui-tab-hideクラスを設定し、新しいタブのクリックイベントの後に発生することがわかります。このようにして、ui-tabs-hideクラスを受け取ったばかりのタブも削除されます。

それはうまく機能しているように見えますが、私には少しハックのように感じます。それで、これを行うためのより良い方法はありますか？ありがとう。

4

1 に答える 1

0

あなたの解決策は私には問題ないようです。$("div.tab-section").show();よりクリーンですが、クラス名はそのまま保持されます。これは、ユーザーが[すべて]タブをクリックした後に別のタブを選択した場合に備えて不要です。

于 2009-02-13T20:49:55.533 に答える