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

一些问题和疑虑：

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

由于不是这样，他们可以随时轻松地更改目录结构或版本。
您正在使用bootstrap.min.js和bootstrap-tab.js。我相信bootstrap.min.js包含bootstrap-tab.js并使用这两个导致问题。请参阅以下帖子：https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/XH_ttp_9yXg
我也在使用twitter bootstrap 2.1.1。我在tab-bar，bootstrap.min.js，bootstrap-tab.js中找不到bootstrap.css。您是否有可能引用2.1.1文件并对旧版本的Twitter Bootstrap进行编码？

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

1 个答案: