在 Twitter Bootstrap 中使用 Javascript 的 Tabbable Navs答案

【问题标题】：Tabbable Navs Using Javascript In Twitter Bootstrap在 Twitter Bootstrap 中使用 Javascript 的 Tabbable Navs
【发布时间】：2012-10-01 22:20:43
【问题描述】：

我正在尝试为我的网页上的三个表单创建一个可选项卡导航。我无法让 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 新手。只想把事情做好。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

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

【讨论】：