Twitter Bootstrap Onglets: Allez à l'Onglet Spécifique du Rechargement de la Page ou un lien Hypertexte
Je suis l'élaboration d'une page web dans laquelle je suis à l'aide de Twitter Bootstrap Cadre et leur Bootstrap Onglets JS. Il fonctionne très bien à l'exception de quelques problèmes mineurs, dont l'un est je ne sais pas comment aller directement à un onglet spécifique à partir d'un lien externe. Par exemple:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
devrait aller à l'onglet "Accueil" et l'onglet Notes respectivement quand vous cliquez sur les liens à partir d'une page externe
- ce voeu a été construit en!
- Cette question a également été soulevée ici: github.com/twitter/bootstrap/issues/2415 (et a un couple de solutions).
- cela m'a aidé -> stackoverflow.com/questions/12131273/...
- Mise à jour du lien de bootstrap question est github.com/twbs/bootstrap/issues/2415
- Voici une solution plus complète qui m'a aidé: stackoverflow.com/a/22160443/263054
- Plugin qui corrige ceci: github.com/timabell/jquery.stickytabs
- C'est une question similaire, comme stackoverflow.com/q/18999501/873282
- Bootstrap responsive onglets: onaircode.com/bootstrap-responsive-tabs-collection
Vous devez vous connecter pour publier un commentaire.
Voici ma solution à ce problème, un peu tard peut-être. Mais il pourrait peut-être aider d'autres personnes:
window.scrollTo(0, 0);
assurez-vous que la Fenêtre de toujours faire défiler vers le hautSyntax error, unrecognized expression: .nav-tabs a[href=#tab-2]
. Résolu à l'aide de stackoverflow.com/questions/12131273/...a[href=\\#tab_blah]
split
l'url sur'#'
, mais sur l'onglet en cliquant sur la partie il vous suffit d'utiliserwindow.hash
? Ne pouvait paswindow.hash
être utilisé dans les deux cas?Mise à JOUR
Pour Bootstrap 3, modifier
.on('shown', ...)
à.on('shown.bs.tab', ....)
C'est basé sur de @dubbe réponse et ce DONC, a accepté de répondre à. Il traite de la question avec
window.scrollTo(0,0)
ne fonctionne pas correctement. Le problème est que lorsque vous remplacez l'url de hachage sur l'onglet, le navigateur faites défiler jusqu'à celle de hachage depuis sa un élément sur la page. Pour contourner ce problème, ajoutez un préfixe de sorte que le hachage ne faisant pas référence à un réel élément de la pageExemple d'utilisation
Si vous avez onglet-volet id="mytab" vous avez besoin de mettre votre lien comme ceci:
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
vous pourrait déclencher une
click
événement sur l'onglet correspondant lien:.click()
partie pour.trigger('click')
. Mais seulement parce que j'aime le plus de la trigger fonction. Aussi, ce travail de bootstrap 4C'est une amélioration de la mise en œuvre de dubbe la solution qui empêchent de défilement.
Tandis que le JavaScript solution de condition de travail, je suis allé d'une manière légèrement différente qui ne nécessite pas de JavaScript supplémentaire, mais exige la logique de votre point de vue. Vous créez un lien avec une norme paramètre de l'URL, comme:
Ensuite il vous suffit de détecter la valeur de activeTab pour l'écriture de " classe="active"' dans la
<li>
Pseudo-code (mettre en œuvre en conséquence dans votre langue). Remarque j'ai mis onglet "home" comme un actif par défaut si aucun paramètre fourni dans cet exemple.
Pour Bootstrap 3:
https://jsfiddle.net/DTcHh/6638/
Je ne suis pas un grand fan de if...else; alors j'ai pris une approche plus simple.
N'a pas d'adresse défilement à la demande de hachage; mais devrait il?
Cela fonctionne dans le Bootstrap 3 et améliore dubbe et flynfish 's 2 réponses les plus fréquentes en intégrant GarciaWebDev 's réponse (ce qui permet aux paramètres d'url après le hachage et est directement à partir de Bootstrap auteurs sur le github issue tracker):
'shown'
devrait être'shown.bs.tab'
par la documentation: getbootstrap.com/javascript/#tabs-events. Je suis perplexe quant à pourquoi mais quand j'ai essayé de modifier votre post, il a été rejeté...Ce code sélectionne l'onglet de droite en fonction de la #hash et ajoute le droit #de hachage lorsqu'un onglet est sélectionné. (il utilise jquery)
En Coffeescript :
ou en JS :
Bâtiment sur Demircan Celebi de la solution; je voulais l'onglet pour l'ouvrir lors de la modification de l'url et ouvrir l'onglet sans avoir à recharger la page à partir du serveur.
Ce code à partir de http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 a fonctionné parfaitement pour moi.
@flynfish + @Ztyx solution que j'utilise pour les sous-onglets:
enfants devraient avoir class="imbriqués"
Merci pour le partage de votre point de vue.
Par la lecture de toutes les solutions. Je suis venu avec une solution qui utilise le hachage de l'url ou localStorage en fonction de la disponibilité de ce dernier avec le code ci-dessous:
Je vous suggère d'utiliser le code fourni par Bootstrap des auteurs sur leurs problème de tracker sur GitHub:
Vous pouvez trouver sur le lien pour l'émission de plus d'informations sur pourquoi ils n'ont pas choisi de soutenir que.
Voici ce que j'ai fait, c'est vraiment simple, et à la condition que votre onglet liens ont un IDENTIFIANT associé avec eux, vous pouvez obtenir l'attribut href et le passer à la fonction qui affiche l'onglet contenu:
Puis dans votre url, vous pouvez ajouter le hachage comme quelque chose comme: #tab_tab1, le " tab_ est retiré de la table de hachage elle-même, si l'ID de la véritable lien de l'onglet dans le nav-tabs (tabid1) est placé après cela, de sorte que votre url ressemblerait à quelque chose comme: http://www.mydomain.com/index.php#tab_tabid1.
Cela fonctionne parfaitement pour moi et j'espère que ça aide quelqu'un d'autre 🙂
Essayé couple de différentes façons décrites ci-dessus et à la fin avec la solution de travail, il suffit de copier et coller dans votre éditeur d'essayer. Pour tester il suffit de changer de hachage à la boîte de réception, boîte d'envoi, de composer dans l'url et appuyez sur la touche enter.
Espère que cela permettra d'économiser votre temps.
C'est ma solution pour gérer les onglets imbriqués.
J'ai juste ajouté une fonction pour vérifier si l'onglet actif a un onglet parent à être activé.
C'est la fonction:
Et peut être appelé comme ça (Basé sur @flynfish de la solution):
Cette solution fonctionne très bien pour moi en ce moment.
J'espère que cela peut être utile pour quelqu'un d'autre 😉
J'ai dû modifier quelques morceaux pour que cela fonctionne pour moi.
Je suis avec Bootstrap 3 et jQuery 2
Il suffit d'insérer ce code sur votre page:
JS:
Je viens d'avoir ce problème, mais nécessaires pour gérer plusieurs onglet niveaux. Le code est assez moche (voir les commentaires), mais fait son travail: https://gist.github.com/JensRantil/4721860 j'espère que quelqu'un d'autre va trouver qu'il est utile (et n'hésitez pas à proposer de meilleures solutions!).
Combinaison de morceaux à partir d'autres réponses, voici une solution qui peut ouvrir de nombreux niveaux d'imbrication des onglets:
$('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});
dans le code javascript, au-dessus de votre code.Je fais qqch comme ça pour les liens avec l'ajax
#!#
(par exemple,/test.com#!#test3), mais vous pouvez modifier ce que vous voulezExemple avec une simple page sur Github ici
Si c'est important pour personne, le code suivant est petit et fonctionne sans faille, pour obtenir une seule valeur de hachage à partir de l'URL et de montrer que:
ce qu'il fait c'est qu'il récupère l'id et déclenche l'événement click. Simple.
Je sais que ce fil est très vieux, mais je vais le laisser ici ma propre mise en œuvre:
Remarque que je suis en utilisant un
nav-
le préfixe de classe à la valeur liquidative des liens.