如何在頁面重新載入時或透過外部連結直接導航到引導標籤？

在頁面重新載入或外部連結上直接導航到Bootstrap 標籤

在Web 應用程式中使用Bootstrap 標籤時，用戶可能會遇到以下需求當頁面最初載入或從外部點擊時直接導航到特定選項卡連結。

問題：

考慮以下 HTML程式碼：

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

目的是讓連結導航到各自的主頁和從外部點擊時的註解標籤

解決方案：

要實現此功能，您可以使用下列JavaScript程式碼：

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

此程式碼執行以下操作:

• 啟用選項卡連結:當頁面載入時，程式碼會辨識URL 的雜湊部分（#home 或#notes），並自動啟動導覽列中對應的標籤。
• 變更頁面重新載入的雜湊值： 當使用者在標籤之間導航時，程式碼會更新 URL 中的雜湊值以反映所選標籤。這樣，當頁面重新載入時，它會自動導航到正確的選項卡。

以上是如何在頁面重新載入時或透過外部連結直接導航到引導標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！