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

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>

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!