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.

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.

Chefkoch

Als Chefkoch arbeite ich als Systemadministrator und Programmierer. Hier blogge ich über Joomla, Magento, WordPress und Windows. In meiner Freizeit fotografiere ich viel, fahre mit meiner Yamaha XT660R oder Jogge durch die Gegend.