jquery - 如何使用 Twitter Bootstrap 框架淡入淡出选项卡？

Question

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

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

Twitter Bootstrap 框架选项卡是否可以实现类似的功能？

Answer 1

对于 Bootstrap 2 和 3，您只需使用 bootstrap-transition.js 为 .tab-pane 元素提供一个 fade 类即可已加载。根本不需要编写一行自己的 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>

代码示例来自the official Twitter Bootstrap documentation 。