如何使用 tab('show') 使引导 3RC 选项卡消失？答案

【问题标题】：How to make bootstrap 3RC tabs fade using tab('show')?如何使用 tab('show') 使引导 3RC 选项卡消失？
【发布时间】：2013-08-15 08:01:47
【问题描述】：

我有以下code。

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

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

谢谢。

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');
    }
});

【问题讨论】：

你需要使用tab('show')吗？或者你会考虑只使用 BootStrap 提供的标记（不需要 javascript）？
不管怎样，我的意思是我正在使用 tab(show) 打开/关闭标签内容...有没有办法只用标记来切换标签内容？

标签： twitter-bootstrap show-hide fadein twitter-bootstrap-3 bootstrap-tabs

【解决方案1】：

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

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

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

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

【讨论】：