如何從外部連結或頁面刷新後導航到特定的引導選項卡？

從外部連結或頁面刷新導航Twitter Bootstrap 標籤

將Twitter 的Bootstrap 標籤合併到網頁中時，從外部連結或頁面重新載入時直接導航到特定選項卡可能具有挑戰性。本文深入探討了解決方案，使您能夠在選項卡之間無縫切換。

問題背景

假設您有一個名為facility.php 的頁面，它使用 Bootstrap Tabs，並且您想要導航到特定選項卡從外部頁面。例如，按一下以下連結：

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

應分別前往「首頁」和「註解」標籤。但是，從外部頁面直接導航時，此轉換無法發生。

解決方案

為了解決這個問題，我們使用以下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;
})

讓我們檢查解決方案的每個部分：

• 取得目前值Tab: 程式碼的第一部分(hash = location.hash.replace(/^#/, '')) 從 URL 擷取目前標籤的片段識別碼（#home 或 #notes）。
• 啟動所需的選項卡：然後我們使用 .nav-tabs a[href="hash"] 選擇與片段對應的選項卡元素識別碼。最後，我們使用 .tab('show') 來啟動選定的選項卡。
• 在頁面重新載入時更新URL： 程式碼的第二部分(window.location.hash = e .target.hash）更新URL 的片段標識符以在刷新頁面時匹配啟動的選項卡。這可以確保即使在頁面重新加載後也保留當前選項卡。

透過此解決方案，您現在可以輕鬆地從外部連結或頁面刷新時直接導航到特定的 Bootstrap 選項卡，從而增強用戶體驗。

以上是如何從外部連結或頁面刷新後導航到特定的引導選項卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！