JQuery UI Tabs dynamisch per URL-Anker umschalten

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:

  1. (function($) {
  2.     $.address.change(function(event) {
  3.       if (window.location.hash.length > 0) {
  4.         jQuery('div.tabs-processed').tabs("select", window.location.hash)
  5.       }
  6.     });
  7.  
  8.     // when the tab is selected update the url with the hash
  9.     jQuery('div.tabs-processed').bind("tabsselect", function(event, ui) {
  10.       window.location.hash = ui.tab.hash;
  11.     });
  12.   })(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!

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen