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!
