如何使用外部链接导航到特定的引导选项卡？

如何从外部超链接导航到特定的 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 事件处理程序。在此处理程序中，我们更新浏览器的哈希值以反映当前活动的选项卡。这可确保通过 JavaScript 导航选项卡时正确更新哈希值，从而允许用户在重新加载页面时访问所需的选项卡。

以上是如何使用外部链接导航到特定的引导选项卡？的详细内容。更多信息请关注PHP中文网其他相关文章！