3

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

问题：单击任何选项卡时，尽管选项卡按钮本身tab-pane的状态发生了变化，但不会更改。.tab换句话说，当您单击选项卡按钮时，它会显示为按下状态，但应该随选项卡更改的内容不会。Aconsole.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>
4

1 回答 1

3

几个问题和担忧：

  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. tab-bar我在bootstrap.min.js, bootstrap-tab.js,中没有找到bootstrap.css。您是否有可能引用 2.1.1 文件并针对旧版本的 Twitter Bootstrap 进行编码？

于 2012-10-04T01:16:02.863 回答