Twitter Bootstrap 选项卡在点击时不会改变

Question

我正在使用 Twitter Bootstrap v2.1.1 及其可选项卡功能。

问题：当点击任何标签时，tab-pane 不会改变，尽管标签按钮 .tab 本身的状态会发生变化。换句话说，当您单击选项卡按钮时，它会显示为按下状态，但应该随选项卡更改的内容不会。 console.log() 表示正在触发 click 事件。有什么想法吗？

HTML

<!-- Tab Bar -->
<div class="tab-bar">
    <div class="tab active" id="photos" data-toggle="tab" data-target="#photos">
        <p>Photos</p>
    </div>
    <div class="tab" id="details" data-toggle="tab" data-target="#details"
        ><p>Details</p>
    </div>
</div>

<!-- Tab Panes -->
<div class="tab-content">
    <div id="photos" class="tab-pane">Photos</div>
    <div id="details" class="tab-pane">Details</div>
</div>

JS

$('.tab-bar').tab();
$('.tab-bar .tab').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
    console.log('show');
})

JS 包含

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>

Answer 1

几个问题和顾虑：

1. 您的 bootstrap-tab.js src 直接链接到 Twitter Github 页面。我不认为这打算成为 Twitter Bootstrap 的 CDN。我相信这个文件是“吃你自己的狗粮”，即 Twitter Bootstrap Github 页面使用 Twitter Bootstrap 进行文档和下载。

   由于并非如此，他们可以随时轻松地更改目录结构或版本。

2. 您同时使用 bootstrap.min.js 和 bootstrap-tab.js。我相信 bootstrap.min.js 包括 bootstrap-tab.js 并且使用这两种方法都会导致问题。请参阅以下帖子：https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/XH_ttp_9yXg

3. 我也在使用twitter bootstrap 2.1.1。我在bootstrap.min.js、bootstrap-tab.js、bootstrap.css 中没有找到tab-bar。您是否有可能引用 2.1.1 文件并针对旧版本的 Twitter Bootstrap 进行编码？