如何透過 URL 以程式設計方式導航到特定的 Bootstrap 標籤？

導航到Bootstrap 中的特定選項卡

使用Bootstrap 選項卡時，您可能會遇到從Bootstrap 直接連結到特定選項卡的挑戰。外部來源。如果您希望用戶從外部連結無縫存取所需的選項卡，這可能會造成不便。以下是解決此問題的方法：

要啟用直接指向選項卡的鏈接，請實施以下JavaScript 解決方案：

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

使用此腳本，單擊如下所示的外部連結：

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

現在分別將使用者直接導覽至「首頁」和「註解」標籤。此外，當在頁面中選擇選項卡時，URL 的雜湊值會相應更改，即使在頁面重新載入後也會保留選項卡選擇。

以上是如何透過 URL 以程式設計方式導航到特定的 Bootstrap 標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！