1

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

4

1 回答 1

3

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

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

于 2012-10-02T00:22:02.183 回答