Maison > interface Web > js tutoriel > Comment accéder à un onglet Bootstrap spécifique à l'aide d'un lien externe ?

Comment accéder à un onglet Bootstrap spécifique à l'aide d'un lien externe ?

Barbara Streisand
Libérer: 2024-11-28 21:00:14
original
903 Les gens l'ont consulté

How to Navigate to a Specific Bootstrap Tab Using an External Link?

Comment 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>
Copier après la connexion

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;
});
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal