Maison  >  Article  >  interface Web  >  Comment puis-je accéder par programmation à des onglets d'amorçage spécifiques via une URL ?

Comment puis-je accéder par programmation à des onglets d'amorçage spécifiques via une URL ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-25 19:30:12368parcourir

How Do I Programmatically Navigate to Specific Bootstrap Tabs via URL?

Navigation vers des onglets spécifiques dans Bootstrap

Lorsque vous travaillez avec les onglets Bootstrap, vous pouvez rencontrer le défi de créer un lien direct vers un onglet spécifique à partir d'un source externe. Cela peut être un inconvénient si vous souhaitez que les utilisateurs accèdent de manière transparente à l'onglet souhaité à partir de liens externes. Voici comment résoudre ce problème :

Pour activer les liens directement vers les onglets, implémentez la solution JavaScript suivante :

// Enable link to tab
var hash = location.hash.replace(/^#/, '');
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

Avec ce script en place, cliquez sur des liens externes comme ceux-ci :

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

redirige désormais les utilisateurs directement vers les onglets Accueil et Notes, respectivement. De plus, lorsqu'un onglet est sélectionné dans la page, le hachage de l'URL change en conséquence, conservant la sélection de l'onglet même après le 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:
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