twitter引導：加載DOM後激活標籤佈局

我使用Backbone JS和Twitter Bootstrap構建一個標籤容器。實際上，我有一個容器視圖（包含選項卡導航和選項卡本身的容器div），然後每個選項卡都是一個不同的Backbone視圖，它被附加到容器中。twitter引導：加載DOM後激活標籤佈局

的標記標籤之前加載這個樣子的：

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li><a href="#1" data-toggle="tab">Tab1</a></li> 
    <li><a href="#2" data-toggle="tab">Tab2</a></li> 
    </ul> 
    <div class="tab-content"> 
    </div> 
</div>

標籤視圖被附加到tab-content股利。

我的問題是引導標籤佈局實際上並沒有成功。而不是容器中的選項卡式佈局，我得到一組垂直的div。基本上就好像標籤佈局在容器視圖呈現後立即被激活，因此附加的標籤不會被考慮進去，因爲它們最初不是DOM的一部分。

我實質上是在尋找一種方法來調用Bootstrap來激活之後的，它們都已經被加載到DOM中。添加一條線如$(".nav-tabs a:first").tab('show')似乎沒有解決它。

我知道在jQuery UI中，你必須明確地調用一個函數來激活選項卡。有什麼類似的bootstrap？

來源

2012-10-01 Kevin Whitaker

列表元素中的錨點需要將其href設置爲tab-content類中div的id。標籤內容中的div需要有一個「tab-pane」類和一個由錨點引用的id。

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li><a href="#tab1" data-toggle="tab">Tab1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Tab2</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane" id="tab1">tab1</div> 
    <div class="tab-pane" id="tab2">tab2</div> 
    </div> 
</div>

這裏有一個的jsfiddle：http://jsfiddle.net/TVUPF/98/

來源

2012-10-01 22:08:43