0

我正在使用 Backbone JS 和 Twitter Bootstrap 构建一个选项卡容器。本质上，我有一个容器视图（包含选项卡导航和选项卡本身的容器 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-contentdiv。

我的问题是引导选项卡布局实际上并没有占据上风。我得到了一组垂直的 div，而不是容器中的选项卡式布局。基本上就好像在渲染容器视图后立即激活选项卡布局一样，因此，附加的选项卡不会被考虑在内，因为它们最初不是 DOM 的一部分。

我本质上是在寻找一种方法来调用 Bootstrap 以在标签全部加载到 DOM后激活它们。添加一条类似的行$(".nav-tabs a:first").tab('show')似乎无法解决它。

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

4

2 回答 2

1

列表元素内的锚点需要将其 href 设置为 tab-content 类中的 div 的 id。选项卡内容中的 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>

这是一个 jsfiddle：http: //jsfiddle.net/TVUPF/98/

于 2012-10-01T22:08:43.657 回答
0

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

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

有几种不同的解决方案可以完成这项工作。

于 2012-10-02T00:51:38.307 回答