Question

我正在使用Backbone JS和Twitter Bootstrap构建一个标签容器。基本上，我有一个容器视图（包含选项卡导航和选项卡本身的容器div），然后每个选项卡都是一个不同的Backbone视图，它被附加到容器。

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

<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，以便在之后激活标签。添加像$(".nav-tabs a:first").tab('show')这样的行似乎无法修复它。

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

Answer 1

list元素中的锚点需要将其href设置为tab-content类中div的id。 tab-content中的div需要有一个'tab-pane'类和一个由anch引用的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/

Answer 2

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

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

有一些不同的解决方案可以使这项工作。

twitter bootstrap：加载DOM后激活选项卡布局

2 个答案: