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