假设您有几个使用 Twitter Bootstrap 创建的选项卡。如何在同一页面上从一个选项卡链接到另一个选项卡?
例如,假设在我的第一个选项卡上,我想链接到我的第二个选项卡。
假设您有几个使用 Twitter Bootstrap 创建的选项卡。如何在同一页面上从一个选项卡链接到另一个选项卡?
例如,假设在我的第一个选项卡上,我想链接到我的第二个选项卡。
建议的解决方案的轻微变体,更适合我:
HTML:
<a class="btn" href="#login-signup" data-toggle="destination-tab">Sign up</a>
JS:
$(document).on('click', 'a[data-toggle="destination-tab"]', function(event) {
event.preventDefault();
var hash = this.href.replace(/^.+#/, '#');
$('a[href="' +hash+ '"][data-toggle=tab]:first').click();
});
此版本的优点是能够使用 href 属性进行链接,确保您“单击”的链接实际上是一个切换选项卡的链接,并且(并非不重要)限制了链接的数量。一。
在官方 Bootstrab Git repo 上有一个关于这个的问题。Fat 的回答花了我一秒钟的时间才弄清楚,我想让它相对容易扩展。
这是一些代码和一个工作小提琴。
$("a[data-tab-destination]").on('click', function() {
var tab = $(this).attr('data-tab-destination');
$("#"+tab).click();
});
除了使用上面的 jquery 之外,您还必须为每个选项卡锚点指定一个 ID:
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
<li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
<li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
</ul>
然后在自定义数据属性中引用该 ID,如下所示:
<a data-tab-destination="tab-2">Go to Tab #2</a>
这是一个工作小提琴:http: //jsfiddle.net/technotarek/3hJ46/