单击指向特定引导选项卡的链接

时间:2016-05-30 23:45:42

标签: html css twitter-bootstrap tabs

有没有办法可以点击链接并将其转到另一个页面并打开特定的引导标签?

这是我的HTML:

<a href="/admin/#tab2">View Tab 2</a>

在我的/ admin路线上,我有引导标签:

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Completed</a></li>
    <li><a href="#tab2" data-toggle="tab">Confirmed</a></li>
    <li><a href="#tab3" data-toggle="tab">Shipped</a></li>
</ul>

点击我的链接后,我希望该应用转到/ admin路线并显示#tab2的内容。有人可以帮忙吗?

提前致谢!

2 个答案:

答案 0 :(得分:6)

是的,你可以这样做。但它需要一些自定义的jQuery。

首先,您需要使用target="_blank"

在新标签页中打开链接
<a target="_blank" href="/admin/#tab2">View Tab 2</a>

然后,在您要访问的页面上,需要触发该选项卡才能打开。您可以使用此代码执行此操作(其中选项卡具有ID&#34; myTabs&#34;):

$('#myTabs a[href="' + window.location.hash + '"]').tab('show')

有关其网站的更多信息:http://getbootstrap.com/javascript/#tabs

答案 1 :(得分:1)

我必须实现类似的东西,以下插件帮助了我很多:http://www.aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

基本上,它是一个轻量级的jQuery插件,可以在单击每个选项卡时实现基于URL,后退按钮支持和URL更新的选项卡激活(这样您的用户就可以共享链接)。

nav-tabs元素上调用它是这样的:

$('.nav-tabs-sticky').stickyTabs();