JQuery Kochbuch (German Edition)

von Desktop-Anwendungen erwarten würde. Statt die Seite zu verlassen, auf der Sie sich befinden, werden die relevanten Informationen, die mit einem Reiter verbunden sind, nach vorne gebracht (siehe Figure 13-5 ). Ein Beispiel für solch eine Funktionalität ist die Homepage von Yahoo!.
    Lösung
    Indem wir uns das Attribut
href="..."
eines Links holen, der auf der Seite bleibt, können wir jQuery nutzen, um die ID des Ziels zu ermitteln, die Geschwisterelemente zu verbergen und das Ziel-Element nach vorne zu bringen. Dies ist eine sehr einfache Anwendung von jQuery, aber sie kann für tolle Effekte genutzt werden.
    Figure 13-5. Registerkarten für die Navigation durch Informationen
    Registerkarten – HTML-Code
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">















    Registerkarten – jQuery-Code
// Initialisieren
function init_tabs() {

// Ist das Element vorhanden
if (!$('ul.tabs').length) {

    // Wenn nicht, beenden
    return;
}

// Ersten Inhaltsbereich anzeigen
$('div.tab_content_wrap').each(function() {
    $(this).find('div.tab_content:first').show();
});

// Auf Tab-Klicks lauschen
$('ul.tabs a').click(function() {

    // Wenn nicht der aktuelle Tab
    if (!$(this).hasClass('current')) {

     // aktuellen Tab hervorheben
     $(this).addClass('current').parent('li').siblings('li')
     .find('a.current').removeClass('current');

     // Ziel anzeigen, andere verbergen
     $($(this).attr('href')).show().siblings('div.tab_content').hide();
    }

    // Nicht folgen
    this.blur();
    return false;
});
}

// Los geht's
$(document).ready(function() {
init_tabs();
});
    Diskussion
    Wenn die Funktion ausgeführt wird, zeigt sie den ersten Inhaltsbereich an, während der Rest verborgen bleibt. Das liegt an der Regel
display: none
in unserer Datei
preload.css
.
    Darüber hinaus müssen wir nur noch darauf achten, ob ein Link innerhalb von

angeklickt wurde. Wenn dieser noch nicht über das Attribut
class="current"
verfügt, wissen wir, dass dessen Inhalt verborgen ist. Daher fügen wir dem Link dann
class="current"
hinzu und entfernen diese Klasse von allen anderen Geschwister-Tabs. Als nächstes holen wir uns das Attribut
href="..."
für den angeklickten Link, das auf eine ID auf der gleichen Seite verweist, und zeigen dieses Element über die jQuery-Methode
.show()
an, während wir gleichzeitig alle anderen Geschwister-Bereiche verbergen.
    Wenn Sie die Funktionalität erweitern möchten – zum Beispiel eigene Events feuern, wenn sich der Status der Registerkarten ändert, oder Remote-Inhalte per Ajax laden – sollten Sie