如何从外部链接或页面刷新后导航到特定的引导选项卡？

从外部链接或页面刷新导航 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中文网其他相关文章！