如何使用外部連結導航到特定的引導選項卡？

如何從外部超連結導航到特定的Twitter Bootstrap 選項卡

Twitter Bootstrap 選項卡提供了一種將內容組織到單獨部分的便捷方法。但是，從外部連結存取特定選項卡可能會出現問題。本文將解決此問題，引導您找到一個允許直接導航到任何所需選項卡的解決方案。

問題陳述

考慮以下HTML 結構：

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

從外部頁面點擊時，這些連結應導航至指定的標籤（“首頁”和“註釋”

解決方案

利用JavaScript實現此功能：

// Enable tab navigation from links
var hash = location.hash.replace(/^#/, '');
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

// Update hash on tab activation
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

說明

激活選項卡片時會觸發shown.bs.tab事件處理程序。所需的選項卡。

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