Question

我有以下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');
    }
});

Answer 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/

如何使用tab（'show'）使bootstrap 3RC标签淡出？

1 个答案: