twitter-bootstrap - 如何使用 tab('show') 使引导 3RC 选项卡消失？

Question

我有以下代码。

我已经能够在单击时打开/关闭标签，但现在淡入淡出过渡不起作用。

有人知道我做错了什么吗？

谢谢你。

HTML：

<ul id="myTab" class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active fade in" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. </p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
    </div> 
</div>

JavaScript：

$(document).off('click.tab.data-api');
$(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
    e.preventDefault();
    var tab = $($(this).attr('href'));
    var activate = !tab.hasClass('active');
    $('div.tab-content>div.tab-pane.active').removeClass('active');
    $('ul.nav.nav-tabs>li.active').removeClass('active');
    if (activate) {
        $(this).tab('show');
    }
});

Answer 1

您关闭了数据 api$(document).off('click.tab.data-api');并添加了一个新功能。您的函数不处理淡入淡出的过渡。

阅读文档： http: //getbootstrap.com/javascript/#tabs并尝试通过 javascript 激活选项卡：

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

见：http: //jsfiddle.net/Jp42c/13/