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:

Kommentare

Kommentar hinzufügen

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.