Onglets de l'interface utilisateur jQuery, mettez à jour l'URL lorsque vous cliquez sur un onglet différent
Je suis en utilisant les onglets de l'INTERFACE utilisateur de jQuery: http://jqueryui.com/demos/tabs/
Comment mettre à jour l'url de la navigateur lorsque l'utilisateur clique sur un onglet différent en ajoutant à l'ancre du lien:
ex: url.html#tab-4 et en poussant l'histoire actuelle du navigateur dans le même temps.
Merci!
source d'informationauteur Jerome Ansia
Vous devez vous connecter pour publier un commentaire.
Cela devrait obtenir ce que vous voulez (à l'aide de l'INTERFACE utilisateur de jQuery 1.8dans la version 1.9 et l'utilisation ultérieure de l' activer l'événementvoir les autres réponses pour l'exemple de code). J'ai utilisé l'exemple de code HTML dans jQuery UI démos;
Pour jQuery UI 1.10 et plus tard
show
a été dépréciée en faveur deactivate
. Aussiid
n'est plus valide jQuery. Utilisation.attr('id')
à la place. Enfin, l'utilisationon('tabsactivate')
au lieu debind()
.Post-méthode de création:
Démo: http://jsfiddle.net/RVHzV/
Observables résultat: http://jsfiddle.net/RVHzV/show/light/
Plus tôt, la Version de JQuery
Ajouter un gestionnaire pour votre onglet appel à la mise à jour de l'emplacement de hachage avec l'onglet id:
Vous pouvez également ajouter cette après votre INTERFACE utilisateur Onglets sont créés:
Code de démo: http://jsfiddle.net/jtbowden/ZsUBz/1/
Observables résultat: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/
Tout d'abord, nous avons besoin de mettre à jour la table de hachage sur l'onglet modifier (c'est pour plus tard jQueryUI):
Alors nous avons besoin de mettre à jour l'onglet actif sur le hachage de changement (c'est à dire l'activation de l'historique de navigation, les boutons suivant/précédent et de l'utilisateur de taper dans la table de hachage manuellement):
J'ai dû utiliser "créer" au lieu de "activer" pour obtenir mon premier onglet à afficher dans l'URL:
Cette solution semble être de travailler pour le changement de l'URL, mais quand je reviens à l'URL il n'a pas changer d'onglet pour moi. Dois-je faire quelque chose de spécial pour le faire changer d'onglet lorsque l'URL est atteint?
Construction de Jeff B de l'ouvrage ci-dessus...cela fonctionne avec jQuery 1.11.1.
Une combinaison d'autres réponses ici a fonctionné pour moi.
J'ai utilisé cette méthode dans mon jQuery responsive onglets de hash de l'url de l'onglet actif.