Wie navigiere ich programmgesteuert über die URL zu bestimmten Bootstrap-Registerkarten?

Navigieren zu bestimmten Registerkarten in Bootstrap

Bei der Arbeit mit Bootstrap-Registerkarten kann es sein, dass Sie auf die Herausforderung stoßen, von einem aus direkt auf eine bestimmte Registerkarte zu verlinken externe Quelle. Dies kann unpraktisch sein, wenn Sie möchten, dass Benutzer über externe Links nahtlos auf die gewünschte Registerkarte zugreifen können. So lösen Sie dieses Problem:

Um Links direkt zu Tabs zu aktivieren, implementieren Sie die folgende JavaScript-Lösung:

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

Wenn dieses Skript vorhanden ist, klicken Sie auf externe Links wie diese:

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

Navigiert Benutzer jetzt direkt zu den Registerkarten „Startseite“ und „Notizen“. Wenn außerdem ein Tab auf der Seite ausgewählt wird, ändert sich der Hash der URL entsprechend, sodass die Tab-Auswahl auch nach dem Neuladen der Seite bestehen bleibt.

Das obige ist der detaillierte Inhalt vonWie navigiere ich programmgesteuert über die URL zu bestimmten Bootstrap-Registerkarten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!