如何使用Twitter Bootstrap框架淡入和淡出标签？

Question

jQuery UI可以选项初始化选项卡,选项卡设置为淡入/淡出,如下所示:

$(".selector").tabs({ fx: { opacity: 'toggle' } });

Twitter Bootstrap框架选项卡可能类似吗？

Answer 1

对于Bootstrap 2和3,您只需为.tab-pane元素添加一个已加载的fade类bootstrap-transition.js.根本不需要编写一行自己的JavaScript代码.

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

来自官方Twitter Bootstrap文档的代码示例.

Answer 2

不，但你可以添加你自己的jsFiddle

$('.tabs').tabs()
    .bind('change', function (e) {
        $(this).next().hide().fadeIn();
    });