5

Soh Tanaka の素敵でシンプルなタブの例を使用しています。http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

複数のタブ グループを同じページに配置しようとしていますが、各タブ グループに同じクラスを使用しています。タブのコンテンツを動的に作成しているため、タブ グループごとに新しいクラスを作成することは問題外です。

異なるタブ グループに対して同じクラス、同じ jQuery を使用するにはどうすればよいですか? jQuery で使用できる .each() メソッドがあることは知っていますが、jQuery に配置する正しい場所を見つけようとして問題が発生しています。どんな助けでも大歓迎です。

前もって感謝します。

4

3 に答える 3

4

リンクしたブログエントリのコメントでは、それについての議論があります. 彼は次のデモにリンクしています: http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

そのデモでは、タブへのアクセス方法が変更されています。

$("div[class^='simpleTabs']").simpleTabs(); //Run function on any div with class name of "Simple Tabs"

これは、タブ付きセクションをクラスの div でラップすることによって行われますsimpleTabs

于 2010-12-16T22:00:23.383 に答える
3

あなたの記事で参照しているSoh Tanakaのサンプルページからコードをつまむ:

$(document).ready(function() {

 //When page loads...
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content

 //On Click Event
 $("ul.tabs li").click(function() {

  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content

  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active ID content
  return false;
 });

});

重要なのは、タブを切り替える目的で現在のタブ グループのみを参照するようにコードを修正することです。これは、グローバル コンテキストが不要で、ローカル グループのみが必要な場合に、セレクターを変更することによって実現されます。一連のタブからそれらのコンテンツを参照する場合、問題はどのように他のタブと一致させるかです。これは、共通の ID システムを使用して行うか、タブが重複することなくコンテンツの前にあると想定されている場合は、次のことができます。tab_containerタブセットから次を見つけるだけです。

まず、初期化:

$(".tab_content").hide();

すべて非表示にします。

$("ul.tabs li:first").addClass("active");
$(".tab_content:first").show();

よくありません。これはページ上のすべてのタブ グループを参照するため、特定する必要があります。

$("ul.tabs").each(function() {
    $(this).find('li:first').addClass("active");
    $(this).nextAll('.tab_container:first').find('.tab_content:first').show();
});

.click()イベントは無事に開始され、すべてをバインドしてもul.tabs li問題ありません。内部ではセレクターを変更する必要があります。

$("ul.tabs li").click(function() {
    var cTab = $(this).closest('li');
    cTab.siblings('li').removeClass("active");
    cTab.addClass("active");
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide();

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content

    return false;
});

の最後のセクションactiveTabはすでに問題ありませんが、ID を再利用しないように注意してください。

デモを参照してください: http://jsfiddle.net/uyvUZ/1/

視覚的には簡単ですが、別のデモ: http://jsfiddle.net/uyvUZ/2/

于 2010-12-16T22:23:16.783 に答える
0

あなたが提供した例を使用して、2 番目のタブ グループを追加しました。ここで確認できます: http://jsfiddle.net/eSHdb/1/

それを超えて、あなたが試したいくつかのサンプルコードと特定の問題について、あなたが何をしようとしているかの詳細が必要だと思います. 私の例は本当にきれいではありませんが、スタイルを設定できることに注意してください。

于 2010-12-16T22:22:17.637 に答える