Comment puis-je accéder à des onglets d'amorçage spécifiques à partir de liens externes ou après une actualisation de page ?

Naviguer dans les onglets Bootstrap de Twitter à partir de liens externes ou d'une actualisation de page

Lors de l'intégration des onglets Bootstrap de Twitter dans vos pages Web, accédez directement à des onglets spécifiques à partir de liens externes ou lors du rechargement de la page peut être difficile. Cet article examine la solution, vous permettant de passer facilement d'un onglet à l'autre.

Contexte du problème

Supposons que vous disposiez d'une page appelée Facility.php qui utilise les onglets Bootstrap et que vous souhaitiez accéder à des onglets spécifiques. à partir d'une page externe. Par exemple, cliquer sur les liens suivants :

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

devrait mener respectivement aux onglets Accueil et Notes. Cependant, cette transition ne parvient pas à se produire lors d'une navigation directe depuis la page externe.

Solution

Pour résoudre ce problème, nous utilisons le code JavaScript suivant :

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
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;
})

Voyons examinez chaque partie de la solution :

• Obtention de l'onglet actuel : La première partie de le code (hash = location.hash.replace(/^#/, '')) récupère l'identifiant du fragment de l'onglet actuel (#home ou #notes) à partir de l'URL.
• Activation de l'onglet souhaité : Nous utilisons ensuite .nav-tabs a[href="hash"] pour sélectionner l'élément tab qui correspond à l'identifiant du fragment. Enfin, nous utilisons .tab('show') pour activer l'onglet sélectionné.
• Mise à jour de l'URL lors du rechargement de la page : La deuxième partie du code (window.location.hash = e .target.hash) met à jour l'identifiant de fragment de l'URL pour qu'il corresponde à l'onglet activé lorsque la page est actualisée. Cela garantit que l'onglet actuel est conservé même après le rechargement de la page.

Avec cette solution, vous pouvez désormais naviguer facilement directement vers des onglets Bootstrap spécifiques à partir de liens externes ou lors de l'actualisation de la page, améliorant ainsi l'expérience utilisateur.

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!