Ein jQuery Tab Tutorial

Wer schon immer auf der Suche nach einer einfachen Tab Lösung war, der ist hier genau richtig. Mit Hilfe von Tabs lassen sich Inhalte auf einer Webseite einfach strukturieren und vom Benutzer ohne viel gescrolle betrachten und das allerbeste, alle Inhalte befinden sich physisch auf einer Seite und das freut Google & Co.

jQuery Tabs Beispiel

Im folgenden Artikel möchte ich an einem einfachen Beispiel das einbauen von Tabs mit Hilfe von jQuery und CSS demonstrieren. Hier gibt’s die funktionierende jQuery Tab demo.

Verwendeter HTML Code

Beginnen wollen wir mit dem HTML Code der den eigentlichen Inhalt aufnimmt und der auch dann angezeigt wird, wenn ein Benutzer sein JavaScript im Browser deaktiviert hat. So wird doch wenigsten der Inhalt komplett untereinander dargestellt.

Wichtig ist, dass die Sprungmarken (der Anker mit der Zieladresse href=“#tab1″) in den Ankern den Namen unserer DIV-ID widerspiegeln, da die Inhalte dadurch über jQuery angesprochen werden können.

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
    <p>Inhalt Tab #1</p>
</div>
<div id='tab2'>
    <p>Inhalt Tab #2</p>
</div>
<div id='tab3'>
    <p>Inhalt Tab #3</p>
</div>

Verwendeter jQuery Code

Über die Verwendung von jQuery im Code, einfach die verwendeten Kommentare lesen sollte reichen.

$('ul.tabs').each(function(){

    // Fuer jeden Satz Tabs wollen wir verfolgen welcher
    // Tab aktiv ist und der ihm zugeordnete Inhalt
    var $active, $content, $links = $(this).find('a');

    // Der erste Link ist der zu Anfang akitve Tab
    $active = $links.first().addClass('active');
    $content = $($active.attr('href'));

    // Verstecke den restlichen Inhalt
    $links.not(':first').each(function () {
        $($(this).attr('href')).hide();
    });

    // Binde den click event handler ein
    $(this).on('click', 'a', function(e){

        // Mache den alten Tab inaktiv
        $active.removeClass('active');
        $content.hide();

        // Aktualisiere die Variablen mit dem neuen Link und Inhalt
        $active = $(this);
        $content = $($(this).attr('href'));

        // Setze den Tab aktiv
        $active.addClass('active');
        $content.show();

        // Verhindere die Anker standard click Aktion
        e.preventDefault();
    });
});

Das Beispiel wurde mit den aktuellen Browser-Versionen von Firefox 13, Google Chrome 19 und Internet Explorer 9 getestet.

Als Inspiration diente der folgenden Artikel.

3 Gedanken zu „Ein jQuery Tab Tutorial

  1. Vielen Dank für dieses nette kurze Tut. Hat mir eben sehr geholfen auf die schnelle ein Tab-Switcher einzubauen ohne auf irgendwelche Plugins zu setzen.

    Habe ein paar kleine Modifikationen am Code durchgenommen und es noch ein wenig verfeinert. Zb habe ich statt .hide() .fadeOut() hergenommen, selbiges für .show() und .fadeIn(). Dazu war auch noch eine Kleine Anpassung am CSS notwendig damit alle container divs übereinander liegen. Das habe ich mit einer zusätzlichen Klasse und der position: absolute; Definition erledigt. Klappt einwandfrei.

    Danke nochmal.

    1. Hallo Joe,

      das freut mich sehr, dass Du damit etwas anfangen konntest. Das war auch meine Intention, eine einfache Lösung ohne großen Overhead.

      Chefkoch

  2. Ein sehr schönes Script. Ich wollte dieses mit einem Zufallsgenerator (Random) erweitern, dass jedes mal ein neuer Reiter markiert ist und dazu der jeweilige Inhalt dazu geöffnet ist, aber leider sind meine Versuche gescheitert.

    Kann mir jemand dazu einen Tipp geben?

    Vielen Dank

    MfG Steffen

Schreibe einen Kommentar zu Joe Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*