我想创建一个链接,该链接将定位到我网站的另一个页面中的特定选项卡。
我尝试创建这样的链接:www.example.com/test.html#tab2,但它始终针对第一个选项卡(我猜是带有 show class 的选项卡)。
index.html
<a href="test.html#menu-catalog">link for catalog</a>
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
当我单击从 index.html 到目标的链接并打开具有正确 ID 的选项卡时。p>
最佳答案
如果您使用 bootstrap + jquery 设置,则可以通过以下方式轻松实现此行为:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});
关于javascript - 如何从外部链接打开 Bootstrap 3 选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57657844/