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

Question

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

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

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

Answer 2

在官方 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/