JQuery UI Tabs dynamisch per URL-Anker umschalten

Verfasst von Julian Pustkuchen am 14. August 2013 - 16:38

Ihr möchtet jQuery UI Tabs dynamisch anhand der URL "vorauswählen"? Das ist möglich und zudem in vielen Fällen äußerst hilfreich, um "Deeplinks" umsetzen zu können, also Besucher direkt auf den Ziel-Tab zu leiten.

Lautet die URL also zum Beispiel
http://www.example.com steuert Ihr die Tabs an per:
http://www.example.com#tab-1
http://www.example.com#tab-2 usw.

Wobei der Anker durch das "id"-Attribut des jeweiligen Tabs vorgegeben ist.

Wie geht das?

Ihr benötigt das jQuery Address Plugin:
http://www.asual.com/jquery/address/docs/

Und das folgende jQuery Snippet:

(function($) {
$.address.change(function(event) {
if (window.location.hash.length > 0) {
jQuery('div.tabs-processed').tabs("select", window.location.hash)
}
});
// when the tab is selected update the url with the hash
jQuery('div.tabs-processed').bind("tabsselect", function(event, ui) {
window.location.hash = ui.tab.hash;
});
})(jQuery);

Hinweis: Die Snippets gelten für jQuery UI 1.8 und müssen ggf. für andere Versionen angepasst werden, da sich einige Bezeichner im Tabs-Plugin geändert haben!

Einordnung:

Anmelden um Kommentare zu schreiben

Euch gefällt mein Blog?

Vielleicht hilft mir auch ein Buch, euch zukünftig (noch) bessere Artikel zu bieten? (Amazon Wunschliste)

Gerne bewerte ich auch ab und zu einmal unabhängig ein Produkt.

Ich freue mich über jede Art der Unterstützung in Form von Kommentaren, Lob oder Kritik.
Auf zum Kontaktformular!
Zu meinem Google+ Profil

Julian Pustkuchen, M. Sc. Wirtschaftsinformatik ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung sowie Usability- & Ablaufoptimierung bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.