Comment accéder directement à un onglet Bootstrap lors du rechargement de la page ou via un lien externe ?

Naviguez directement vers l'onglet Bootstrap lors du rechargement de la page ou d'un lien externe

Lorsqu'ils travaillent avec les onglets Bootstrap dans une application Web, les utilisateurs peuvent rencontrer le besoin pour accéder directement à un onglet spécifique lors du chargement initial de la page ou lorsque vous cliquez dessus depuis un externe lien.

Problème :

Considérez le code HTML suivant :

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

L'intention est que les liens accèdent aux pages d'accueil et Onglets Notes lorsque vous cliquez sur un périphérique externe page.

Solution :

Pour réaliser cette fonctionnalité, vous pouvez utiliser le code JavaScript suivant :

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

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

Ce code effectue les actions suivantes :

• Activer le lien vers l'onglet : Lorsque la page se charge, le code identifie le partie de hachage de l'URL (#home ou #notes) et active automatiquement l'onglet correspondant dans la barre de navigation.
• Modifier le hachage pour le rechargement de la page : Lorsqu'un utilisateur navigue entre les onglets, le le code met à jour le hachage dans l'URL pour refléter l'onglet sélectionné. De cette façon, lorsque la page est rechargée, elle accède automatiquement au bon onglet.

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!