BootStrap 2.0 的选项卡 JavaScript 不起作用答案

【问题标题】：Tab JavaScript for BootStrap 2.0 not workingBootStrap 2.0 的选项卡 JavaScript 不起作用
【发布时间】：2012-02-06 09:25:08
【问题描述】：

我正在尝试启动新的 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>

【问题讨论】：

看起来好像当我在 Chrome 的开发人员工具中查看 html 时，第二个选项卡的
标记被移动到第一个选项卡的
标记内，这使得整个事情无法正常工作。这也发生在 IE 9 中。我已经注释掉了所有的 javascript 和 css，它仍然会做出这个改变。这可能是什么原因造成的？
以下行导致我的第二个问题
当它被替换为
它开始表现得更好。

【解决方案1】：

我认为您缺少一个 css 类 (nav) 并且“选项卡”现在应该称为“导航选项卡”，这是自 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>

-更新-

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

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

您可能想要更改 :last in :first 以激活第一个选项卡。

【讨论】：

修复顶部的tab部分，但不修复内容来回切换的问题。
您的更新有帮助，但脚本没有将信息隐藏在第二个选项卡中，并且当我单击选项卡时它没有切换任何内容。