javascript - 在 Twitter Bootstrap 中使用 Javascript 的 Tabbable Navs

Question

我正在尝试为我的网页上的三个表单创建一个可标记的导航。我无法让 Javascript 为选项卡工作。 Twitter 文档中有两个脚本。

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

和

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

这是文档中给出的可标记导航的 html。

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

如何在我的网页上使用这两个代码块在单击两个选项卡之一时显示适当的内容？我是 Javascript 新手。只想把事情做好。

Answer 1

由于每个选项卡上的 data-toggle='tab' 属性，您不需要单独启用选项卡。确保您已添加 bootstrap.js文件到您的页面。

如果你愿意，你可以看看这个例子:http://jsfiddle.net/voytko/TVUPF/