如何通过 URL 以编程方式导航到特定的 Bootstrap 选项卡？

导航到 Bootstrap 中的特定选项卡

使用 Bootstrap 选项卡时，您可能会遇到从 Bootstrap 直接链接到特定选项卡的挑战。外部来源。如果您希望用户从外部链接无缝访问所需的选项卡，这可能会带来不便。以下是解决此问题的方法：

要启用直接指向选项卡的链接，请实施以下 JavaScript 解决方案：

// Enable link to tab
var hash = location.hash.replace(/^#/, '');
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;
})

使用此脚本，单击如下所示的外部链接：

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

现在分别将用户直接导航到“主页”和“注释”选项卡。此外，当在页面中选择选项卡时，URL 的哈希值会相应更改，即使在页面重新加载后也会保留选项卡选择。

以上是如何通过 URL 以编程方式导航到特定的 Bootstrap 选项卡？的详细内容。更多信息请关注PHP中文网其他相关文章！