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:
- (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!
- 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.
Entwickelt Julian gerade keine Software, fährt er Ski, Mountainbike, spielt Badminton, segelt oder verbringt Zeit mit Freunden.
Dieser Blog dient als sein "öffentlicher Notizblo(ck/g)".
Webbasierte Lösungen? Machen wir!
webks: websolutions kept simple
http://www.webks.de
Dir hat dieser Beitrag viel Zeit und Nerven gespart?
Dann freue ich mich über jede kleine Anerkennung:
Oder du suchst weitere professionelle Unterstützung?
Dann bietet dir unser webks.de Softwareentwickler-Team professionelle Dienstleistungen im Web-Development und der Drupal CMS Entwicklung!