如何在 Twitter Bootstrap 中从一个选项卡链接到另一个选项卡？答案

【问题标题】：How do I link from one tab to another in Twitter Bootstrap?如何在 Twitter Bootstrap 中从一个选项卡链接到另一个选项卡？
【发布时间】：2013-02-15 02:26:12
【问题描述】：

假设您使用 Twitter Bootstrap 创建了多个选项卡。如何在同一页面上从一个选项卡链接到另一个选项卡？

例如，假设在我的第一个选项卡上，我想链接到我的第二个选项卡。

【问题讨论】：

标签： jquery html twitter-bootstrap tabs custom-data-attribute

【解决方案1】：

建议的解决方案略有不同，更适合我：

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 属性进行链接，确保您“单击”的链接实际上是一个切换选项卡的链接，并且（并非不重要）限制了链接的数量被链接到一个。

【讨论】：

【解决方案2】：

在官方 Bootstrab Git repo 上有一个 issue 公开了这个问题。 Fat 的回答花了我一秒钟的时间才弄清楚，我想让它相对容易扩展。

这是一些代码和一个有效的小提琴。

$("a[data-tab-destination]").on('click', function() {
    var tab = $(this).attr('data-tab-destination');
    $("#"+tab).click();
});

除了使用上面的jquery，你还得给每个tab anchor一个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/

【讨论】：