javascript-Twitter引导选项卡在单击时不会更改

我正在使用Twitter Bootstrap v2.1.1及其可选项.

问题：单击任何选项卡时,尽管选项卡按钮.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>

$('.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>

解决方法:

几个问题和担忧：

>您的bootstrap-tab.js的src直接链接到Twitter Github页面.我不认为这旨在成为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.我在bootstrap.min.js,bootstrap-tab.js,bootstrap.css中找不到标签栏.您是否可能参考2.1.1文件并针对旧版本的Twitter Bootstrap进行编码？

javascript-Twitter引导选项卡在单击时不会更改

相关文章