如何在Twitter Bootstrap中從一個標籤鏈接到另一個標籤？

Question

假設您使用Twitter Bootstrap創建了多個選項卡。如何在同一個確切的頁面上從一個標籤鏈接到另一個標籤？

例如，讓我們說在我的第一個標籤上，我想鏈接到我的第二個標籤。

Answer 1

有一個issue在官方的Bootstrab Git回購上打開了這個。胖子的答案讓我花了一秒鐘的時間來弄清楚，我想讓它變得相對容易。

這是一些代碼和工作小提琴。

$("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/

Answer 2

p的輕微變體roposed解決方案，更好適合我：

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屬性用於鏈接的優勢，可確保你實際上是「點擊」鏈接實際上是一個切換選項卡和（而不是不重要）限制鏈接到一個鏈接的數量。