


Comment accéder à un onglet Bootstrap spécifique à l'aide d'un lien externe ?
Nov 28, 2024 pm 09:00 PMComment accéder à un onglet d'amorçage Twitter spécifique à partir d'un lien hypertexte externe
Les onglets d'amorçage Twitter offrent un moyen pratique d'organiser le contenu en sections distinctes . Cependant, accéder à un onglet spécifique à partir d’un lien externe peut s’avérer problématique. Cet article abordera ce problème en vous guidant à travers une solution qui permet une navigation directe vers n'importe quel onglet souhaité.
Énoncé du problème
Considérez la structure HTML suivante :
<a href="facility.php#home">Home</a> <a href="facility.php#notes">Notes</a>
Lorsqu'on clique sur une page externe, ces liens doivent naviguer vers les onglets spécifiés ("Accueil" et "Notes" respectivement).
Solution
Utiliser JavaScript pour obtenir cette fonctionnalité :
// Enable tab navigation from links var hash = location.hash.replace(/^#/, ''); if (hash) { $('.nav-tabs a[href="#' + hash + '"]').tab('show'); } // Update hash on tab activation $('.nav-tabs a').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash; });
Explication
Le gestionnaire d'événements montré.bs.tab est déclenché lorsqu'un onglet est activé. Dans ce gestionnaire, nous mettons à jour le hachage du navigateur pour refléter l'onglet actuellement actif. Cela garantit que le hachage est correctement mis à jour lorsque l'onglet est parcouru via JavaScript, permettant aux utilisateurs d'accéder à l'onglet souhaité lors du rechargement de la page.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript?
