[Tutorial] multiple JQuery Tabs

Wenn es darum geht, mit JQuery mehrere Tabs auf einer Seite anzulegen, steht man vor einem Problem.
Basierend auf dem Simple Tabs Beispiel von Soh Tanaka habe ich nun das Problem lösen können.

Nehmen wir einmal an, man möchte zwei Tab-Container mit der Struktur:

<div id="tabs" class="tabs">
<ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1" class="tab_content">
          <!-- Inhalt -->
</div>
<div id="tab2" class="tab_content">
          <!-- Inhalt -->
</div>
</div>

anlegen. Dann kommt man natürlich auf die Idee, diesen Code einfach zu kopieren und an anderer Stelle so wieder einzufügen. Übernimmt man aber diesen Code und kopiert einfach einen Tab-Bereich nach unten steht man vor folgendem Problem: DEMO (einfach mal alle Tabs durchklicken).

Hier einmal der benutzte Javascript-Code:

$(document).ready(function(){

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

    $("#tabs ul li").click(function() {
        $("#tabs ul li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).slideDown();
        return false;
    });
});

Kein Wunder, denn im o.a. Code wird ja die ID #tabs angesprochen und die ist beim einfachen Kopieren eben zweimal vorhanden. Was also tun?

Ganz einfach. Man muss im Javascript etwas differenzieren und den HTML-Code anpassen, indem man dem zweiten container die ID #tabs2, etc. gibt. Danach kann man den JS-Code folgendermaßen aufbauen:

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

Da wir ja nun zwei unterschiedliche IDs haben, muss auch die ursprüngliche ID #tabs explizit angesprochen werden, sonst funktioniert das ganze nicht.

Erklärung:

Zeile 1 u. 2: Hier sagen wir, dass alle divs mit der Klasse tab_content versteckt werden soll. Zeile 3 u. 4: Dem ersten Listenpunkt der id tabs und tabs2 wird die Klasse active hinzugefügt.

Zeile 5 u. 6: Die jeweils ersten divs der IDs tabs und tabs2 sollen angezeigt werden, sonst keine, daher Zeile 1 u. 2. Würden wir in den ersten beiden Zeilen nicht explizit sagen, dass die divs versteckt werden sollen, würden u.U. alle divs, wie es in der HTML-Natur liegt, untereinander angezeigt werden.

Wenn wir jetzt nichts klicken müssten, wären wir bereits am Ziel, aber da man ja durch die Tabs navigieren möchte, fehlen noch zwei Funktionen, nämlich eine explizit für die ID tabs und eine für die ID tabs2.

$("#tabs ul li").click(function() {
        $("#tabs ul li").removeClass("active");
        $(this).addClass("active");
        $("#tabs .tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).show();
        return false;
});

Erklärung:

In der ersten Zeile eröffnen wir die Funktion für das Verhalten bei einem Klick auf einen Listenpunkt li.

Zunächst entfernt man die Klasse active, um sie dann in der nächsten Zeile wieder hinzuzufügen? Keine Bange, das ist schon richtig so. Würde man das nicht ausdrücklich sagen, würden alle Listenelemente die Klasse active annehmen und auch behalten und das ist ja nicht Sinn der Sache.

Nun sprechen wir wieder ein bestimmtes div an. Nämlich div.tab_content im div#tabs. Dieses soll standardmäßig nicht angezeigt werden, nur dann, wenn das entsprechende li aktiv ist und entsprechende Klasse besitzt. Hierzu muss das div natürlich wissen, von welchem Link es angesprochen werden darf.

Daher erstellen wir eine Variable activeTab. Diese Variable sucht im Listenelement nach Links [...find("a").attr("href")...], genauer gesagt sucht sie nach dem Attribut, welches sich im href des Links befindet. In unserem Fall gibt es einmal das Attribut “#tab1″ und einmal “tab2″. Dies sind zeitgleich auch die IDs der div-container mit den Inhalten. Der div-container mit der ID #tab1 weiß nun, dass es sich öffnen soll, wenn auf den Link mit dem Attribut “href=”#tab1″ geklickt wurde. Mit $(activeTab).show(); wird genau dies erreicht.

return false; sorgt dafür, dass der Browser die Links nicht fälschlicherweise für “normale” Ankerlinks hält.

Wie das ganze nun fertig aussieht, könnt ihr der fertigen DEMO entnehmen.