Wie navigiere ich über einen externen Link zu einer bestimmten Bootstrap-Registerkarte?

So navigieren Sie von einem externen Hyperlink zu einem bestimmten Twitter-Bootstrap-Tab

Twitter-Bootstrap-Tabs bieten eine praktische Möglichkeit, Inhalte in separaten Abschnitten zu organisieren . Der Zugriff auf eine bestimmte Registerkarte über einen externen Link kann jedoch problematisch sein. Dieser Artikel befasst sich mit diesem Problem und führt Sie durch eine Lösung, die die direkte Navigation zu jeder gewünschten Registerkarte ermöglicht.

Problemstellung

Beachten Sie die folgende HTML-Struktur:

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

Wenn diese Links von einer externen Seite aus angeklickt werden, sollten sie zu den angegebenen Registerkarten („Startseite“ und „Notizen“) führen. bzw.).

Lösung

Verwenden Sie JavaScript, um diese Funktionalität zu erreichen:

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

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

Erklärung

Der Event-Handler „shown.bs.tab“ wird ausgelöst, wenn eine Registerkarte aktiviert wird. Innerhalb dieses Handlers aktualisieren wir den Hash des Browsers, um den aktuell aktiven Tab wiederzugeben. Dadurch wird sichergestellt, dass der Hash korrekt aktualisiert wird, wenn über JavaScript durch die Registerkarte navigiert wird, sodass Benutzer beim erneuten Laden der Seite auf die gewünschte Registerkarte zugreifen können.

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