首頁 > web前端 > js教程 > 如何使用外部連結定位特定的引導選項卡並在重新載入時保留選擇?

如何使用外部連結定位特定的引導選項卡並在重新載入時保留選擇?

Barbara Streisand
發布: 2024-12-03 03:59:11
原創
1011 人瀏覽過

How Can I Target Specific Bootstrap Tabs Using External Links and Preserve the Selection on Reload?

使用外部連結定位特定Bootstrap 標籤

查詢:

點擊時如何導覽至特定Bootstrap 選項卡Bootstrap 標籤在外部連結上,確保所需的選項卡在頁面上保持活動重新載入?

答案:

要實現此功能,請實現以下JavaScript 代碼:

// 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;
})
登入後複製

說明:

  1. 找到hash:從目前 URL 檢索哈希(“#”後面的部分)。
  2. 啟動標籤: 搜尋與雜湊相符的選項卡連結並將其切換到show.
  3. 在重新載入時保留雜湊:顯示選項卡時更新URL 雜湊以保持其活動狀態頁面重新載入時。

以上是如何使用外部連結定位特定的引導選項卡並在重新載入時保留選擇?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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