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

【问题标题】：How can I fade tabs in & out with the Twitter Bootstrap framework?如何使用 Twitter Bootstrap 框架淡入淡出标签？
【发布时间】：2012-01-18 18:47:14
【问题描述】：

jQuery UI 可以选择使用设置为淡入/淡出的标签来初始化标签，如下所示：

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

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

【问题讨论】：

标签： jquery tabs twitter-bootstrap

【解决方案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>

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

【讨论】：

如果我们要为所有这些设置淡化类，它将隐藏所有选项卡的内容。在淡化类写入工作后，答案将是至少一个选项卡应该有in。
我相信这个答案 + @PHPSeeker 的评论是解决这个问题的更充分的方法，因为它们使用框架提供的设施，因此可以更好地回答所述问题（并且，就个人而言，参考.in刚才省了我不少头疼）
这应该是公认的答案。它也适用于 Bootstrap 3。
更具体地说，“淡入”必须在活动面板中。我傻到为此困惑了几分钟。
感谢您的解决方案。

【解决方案2】：

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

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

【讨论】：

查看 Sanhyun 的回答。这是正确的做法。