首頁 > web前端 > js教程 > 主體

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

Mary-Kate Olsen
發布: 2024-11-25 19:30:12
原創
366 人瀏覽過

How Do I Programmatically Navigate to Specific Bootstrap Tabs via URL?

導航到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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板