twitter引导程序:在加载DOM之后激活选项卡布局

Question

我正在使用主干JS和Twitter引导构建一个选项卡容器。本质上，我有一个容器视图(包含选项卡导航和选项卡本身的容器div )，然后每个选项卡都是一个附加到容器中的不同的主干视图。

加载选项卡之前的标记如下所示：

<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。

我的问题是，引导选项卡布局并没有真正占据主导地位。我得到的不是容器中的选项卡布局，而是一组垂直的div。这基本上就像在呈现容器视图之后立即激活选项卡布局一样，因此，附加的选项卡不会被考虑在内，因为它们最初不是DOM的一部分。

本质上，我正在寻找一种方法来调用Bootstrap，在所有选项卡都加载到DOM之后激活它们。添加像$(".nav-tabs a:first").tab('show')这样的行似乎无法修复它。

我知道在jQuery UI中，您必须显式调用一个函数来激活选项卡。有类似的东西用于引导吗？

Answer 1

列表元素中的锚点需要将它们的href设置为选项卡内容类中div的ids。选项卡内容中的div需要有一个“选项卡窗格”类和一个由锚引用的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>

这里有个小摆设：http://jsfiddle.net/TVUPF/98/

Answer 2

这可能会有帮助：http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/

在这篇文章中，我提供了一个示例，说明如何使用依赖于DOM中的元素的诸如引导程序之类的控件套件。

有几个不同的解决方案，使这一工作。