Wie kann ich über externe Links oder nach einer Seitenaktualisierung zu bestimmten Bootstrap-Registerkarten navigieren?

Navigieren durch Twitter-Bootstrap-Tabs über externe Links oder Seitenaktualisierung

Wenn Sie die Bootstrap-Tabs von Twitter in Ihre Webseiten integrieren, navigieren Sie über externe Links oder beim Neuladen der Seite direkt zu bestimmten Tabs kann eine Herausforderung sein. In diesem Artikel geht es um die Lösung, mit der Sie nahtlos zwischen Tabs wechseln können.

Hintergrund des Problems

Angenommen, Sie haben eine Seite namens „facility.php“, die Bootstrap-Tabs verwendet, und Sie möchten zu bestimmten Tabs navigieren von einer externen Seite. Wenn Sie beispielsweise auf die folgenden Links klicken:

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

sollten Sie jeweils zu den Registerkarten „Startseite“ und „Notizen“ gelangen. Bei der direkten Navigation von der externen Seite tritt dieser Übergang jedoch nicht auf.

Lösung

Um dieses Problem zu beheben, verwenden wir den folgenden JavaScript-Code:

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

Lass uns Untersuchen Sie jeden Teil der Lösung:

• Den aktuellen Tab abrufen:Der erste Teil der Code (hash = location.hash.replace(/^#/, '')) ruft die Fragment-ID des aktuellen Tabs (#home oder #notes) von der URL ab.
• Aktivieren des gewünschten Tabs: Anschließend verwenden wir .nav-tabs a[href="hash"], um das Tab-Element auszuwählen, das der Fragment-ID entspricht. Schließlich verwenden wir .tab('show'), um den ausgewählten Tab zu aktivieren.
• Aktualisieren der URL beim erneuten Laden der Seite: Der zweite Teil des Codes (window.location.hash = e .target.hash) aktualisiert die Fragment-ID der URL so, dass sie mit der aktivierten Registerkarte übereinstimmt, wenn die Seite aktualisiert wird. Dadurch wird sichergestellt, dass die aktuelle Registerkarte auch nach dem Neuladen der Seite erhalten bleibt.

Mit dieser Lösung können Sie jetzt bequem über externe Links oder bei der Seitenaktualisierung direkt zu bestimmten Bootstrap-Registerkarten navigieren und so das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich über externe Links oder nach einer Seitenaktualisierung zu bestimmten Bootstrap-Registerkarten navigieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!