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回购中有一个issue已经打开了。 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/

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

2 个答案: