1

タブを表示する以下のコードがあります。タブをクリックすると機能しますが、ページの読み込みでは機能しません(すべてのタブのコンテンツが表示されます)。また、ボタンをクリックするだけで、ページ上のすべての 1 番目、2 番目、または 3 番目のタブを開くことができる必要があります (ページ上の複数のタブ グループ)。

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

$("ul.tabs li a").click(function() {
    $(".tab_content").hide();
    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;
});

jsfiddle .

また、他のタブ ソリューションも受け入れています。

4

2 に答える 2

2

http://jsfiddle.net/agBgL/1/

最初にタブのコンテンツを非表示にするだけです。

于 2012-06-10T10:26:20.537 に答える