如何通过单击链接打开特定的引导选项卡

Question

我正在尝试添加一个Bootstrap选项卡面板，如下所示：

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>

现在我需要给用户一个链接，让他们看到这样的窗格：

https://sitename.com/page#tabs-2

但这不起作用，因为id为tabs-2的选项卡窗格没有.active类。

但是，如果我尝试加载https://sitename.com/page#tabs-1，页面会正确地将我重定向到id为tabs-1的选项卡窗格(因为默认情况下它有.active类(

那么，如何正确地将用户重定向到不同的选项卡窗格呢？

Answer 1

您不需要检查片段就可以在这些选项卡之间切换

1(从这里导入jQuery或：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

2(将此部分添加到代码中

<script>
$(document).ready(function () {
$('.nav-tabs a').click(function () {
$(this).tab('show');
});
});
</script>

Answer 2

在您删除之前，我已经开始回答您的旧问题，但现在又来了。我不明白你想要实现什么，所以我只是查看了代码并制作了我的版本，它不是最好的，但它很有效。

这是一个onClick事件处理程序，它在导航中单击时执行，并更改活动类。

// onClick event handler, gets executed on click
$(".nav-link").on("click", (e) => {
// store clicked element
const listItem = e.target;
// get hash
const hash = e.target.hash;
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to list item and tab panes
$(listItem).add(hash).addClass("active");
});

当您重新加载页面时，将执行此部分。您需要更改HTML才能正常工作，因此从nav链接中删除活动类，并为每个链接提供一个额外的类(tabs-1、tabs-2和tabs-3(。

// when page is reloaded
$(document).ready(() => {
// get current hash
const hashList = window.location.hash;
const hashItems = hashList.slice(1);
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to nav-link and pane
$(hashList).add(`.${hashItems}`).addClass("active");
}); 

当然，这两个片段都需要包含在脚本标记中，如果还没有导入jQuery，也需要导入jQuery。