jQuery, mehrere Registerkartengruppen auf einer Seite

Question

Ich verwende ein nettes einfaches Tabbeispiel aus Soh Tanaka. http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

Ich versuche, mehrere Registerkartengruppen auf derselben Seite zu setzen, aber die gleichen Klassen für jede Registerkartengruppe verwenden. Ich mache den Inhalt für die Registerkarten dynamisch, sodass neue Klassen für jede Registergruppe nicht in Frage kommen.

Wie verwende ich die gleichen Klassen, die gleiche jQuery für die verschiedenen Registerkartengruppen? Ich weiß, dass die Methode .each() in jQuery verfügbar ist, aber ich habe Probleme, die richtigen Orte zu finden, um sie in jQuery zu setzen. Jede Hilfe wird sehr geschätzt.

Vielen Dank im Voraus.

Answer 1

In den Kommentaren zu dem von Ihnen verlinkten Blogeintrag gibt es eine Diskussion darüber. Er verlinkt hier zu einer Demo: http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

In dieser Demo gibt es eine Änderung in der Art und Weise, auf die Tabs aufgerufen werden. Diese

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

erfolgt durch Ihre Registerkarten in einem div Umwickeln mit einer Klasse von simpleTabs

Answer 2

ich das Beispiel verwendet, um Sie zur Verfügung gestellt und hat eine zweite Registerkarte Gruppe. Sie können es hier sehen:

Darüber hinaus denke ich, wir brauchen mehr Details von dem, was Sie versuchen mit ein paar Beispielcode, die Sie versucht haben, und spezifische Probleme. Beachten Sie, mein Beispiel ist nicht wirklich hübsch, aber es könnte gestylt werden.

Answer 3

Kneifen den Code aus dem Beispielseite von Soh Tanaka, dass Sie in Ihrem Artikel verweisen:

$(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; 
}); 

}); 

Der kritische Bit ist, den Code zu beheben, nur auf die aktuelle Registerkarte Gruppe für die Zwecke beziehen Schalt zwischen den Tabs. Dies wird erreicht, indem sichergestellt wird, dass, wo der globale Kontext nicht erwünscht ist, nur die lokale Gruppe, wir den Selektor ändern. Wenn man von einer Reihe von Tabs auf ihren Inhalt verweist, ist das Problem, wie man sie miteinander abgleicht, dies kann entweder mit einem gewöhnlichen ID-System geschehen, oder wenn Tabs ihren Inhalt vorausgehen, ohne sich zu überlappen, dann können wir das tun Suchen Sie einfach die nächsten tab_container aus einem Tab-Set.

Zuerst Initialisierung:

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

Gut, wollen wir alle von ihnen verstecken.

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

Nicht gut, dies würde sich auf alle Registerkartengruppen auf der Seite beziehen, muss spezifisch sein.

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

Die .click() Veranstaltung beginnt in Ordnung aus, verbindliche alle ul.tabs li in Ordnung ist. Darin müssen die Selektoren geändert werden.

$("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; 
}); 

Der letzte Abschnitt mit den activeTab ist schon in Ordnung, nur vorsichtig sein IDs nicht wieder zu verwenden.

Siehe Demo:http://jsfiddle.net/uyvUZ/1/

Optisch leichter, aber verschiedene Demo:http://jsfiddle.net/uyvUZ/2/