如何在页面重新加载时或通过外部链接直接导航到引导选项卡？

在页面重新加载或外部链接上直接导航到 Bootstrap 选项卡

在 Web 应用程序中使用 Bootstrap 选项卡时，用户可能会遇到以下需求当页面最初加载或从外部单击时直接导航到特定选项卡链接。

问题：

考虑以下 HTML 代码：

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

目的是让链接导航到各自的主页和从外部单击时的注释选项卡

解决方案：

要实现此功能，您可以使用以下 JavaScript 代码：

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

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

此代码执行以下操作:

• 启用选项卡链接:当页面加载时，代码会识别 URL 的哈希部分（#home 或 #notes），并自动激活导航栏中相应的选项卡。
• 更改页面重新加载的哈希值： 当用户在选项卡之间导航时，代码会更新 URL 中的哈希值以反映所选选项卡。这样，当页面重新加载时，它会自动导航到正确的选项卡。

以上是如何在页面重新加载时或通过外部链接直接导航到引导选项卡？的详细内容。更多信息请关注PHP中文网其他相关文章！