Wie navigiere ich beim Neuladen der Seite oder über einen externen Link direkt zu einer Bootstrap-Registerkarte?

Navigieren Sie beim erneuten Laden der Seite oder beim externen Link direkt zum Bootstrap-Tab.

Bei der Arbeit mit Bootstrap-Tabs in einer Webanwendung kann es sein, dass Benutzer auf die Notwendigkeit stoßen um direkt zu einer bestimmten Registerkarte zu navigieren, wenn die Seite zum ersten Mal geladen wird oder wenn von außen darauf geklickt wird Link.

Problem:

Bedenken Sie den folgenden HTML-Code:

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

Die Absicht besteht darin, dass die Links zur jeweiligen Startseite und navigieren Notizen-Registerkarten, wenn von außen darauf geklickt wird Seite.

Lösung:

Um diese Funktionalität zu erreichen, können Sie den folgenden JavaScript-Code verwenden:

// 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;
})

Dieser Code führt die folgenden Aktionen aus :

• Link zum Tab aktivieren: Wenn die Seite geladen wird, identifiziert der Code die Hash-Teil der URL (#home oder #notes) und aktiviert automatisch die entsprechende Registerkarte in der Navigationsleiste.
• Hash für das Neuladen der Seite ändern: Wenn ein Benutzer zwischen Registerkarten navigiert, wird der Der Code aktualisiert den Hash in der URL, um die ausgewählte Registerkarte widerzuspiegeln. Auf diese Weise navigiert die Seite beim Neuladen automatisch zum richtigen Tab.

Das obige ist der detaillierte Inhalt vonWie navigiere ich beim Neuladen der Seite oder über einen externen Link direkt zu einer Bootstrap-Registerkarte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!