BootStrap 2.0 的选项卡 JavaScript 不起作用

Question

我正在尝试让新的 Bootstrap 2.0 CSS 文件和 JavaScript 文件启动并工作，但我似乎无法让选项卡脚本工作。它只是显示好像什么也没发生，我似乎无法弄清楚我做错了什么。 我的 HTML 如下

<ul class="tabs">
    <li class="active"><a href="#parts" data-toggle="tab">Parts</a></li>
    <li><a href="#partCompare" data-toggle="tab">Part Compare</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="parts" >
        <div class="page-header">
            <h1>
                Parts
                @using (Ajax.BeginForm("SearchPart", "Part", null, new AjaxOptions {     UpdateTargetId = "update_panel" }, new { @class = "pull-right" }))
                {
                    <input type="search" name="search" id="search" value />
                    <input type="submit" value="Search"/>
                }
            </h1>
        </div>
        <div class="container-fluid" id="main">
            <div class="row-fluid">
                <div id="navigation" class="span2">
                    <ul class="treeview"/>
                </div>
                <div id = "mainwindow" class="span10">
                    <div id="update_panel"/>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="partCompare">This is the part Compare Tab!!!</div>
</div>
<script type="text/javascript">
    $(function() {
        $('.tabs').tab('show');
    });
</script>

Answer 1

我认为你缺少一个 css 类（nav），并且“选项卡”现在应该被称为“nav-tabs”，这是自 Bootstrap 1.4 以来的变化之一：

Tabs and pills now require the use of a new base class, .nav, on their <ul>

他们给出了这个例子：

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

-update-

jQuery 选择器缺少“a” ' 部分：

$(function () {
  $('.tabs a:last').tab('show')
})

您可能想更改 :first 中的 :last 来激活第一个选项卡。

Answer 2

您使用什么版本的 jQuery？ 2.0 中的选项卡使用 .on()，在 1.7 版本中添加到 jQuery。

我遇到了同样的问题，jQuery 1.5.1 和选项卡在 bootstrap 1.4 下工作正常，但在 2.0 下退出。升级 jQuery 解决了我的问题。