css - twitter bootstrap 3 选项卡视图淡入淡出无法正常工作

Question

我使用 twitter bootstrap 3 应用.fade来显示淡入淡出的标签。这很好，除了第一次没有显示第一个选项卡的内容：

http://jsfiddle.net/tVSv9/

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane fade active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
      </div>
      <div class="tab-pane fade" id="profile">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
      </div>
      <div class="tab-pane fade" id="messages">
          this is my message
      </div>
      <div class="tab-pane fade" id="settings"></div>
    </div>    

代码里面的问题在哪里？

Answer 1

您需要将in类添加到您的活动标签内容

背后的原因是引导 css 中有预定义的样式，.fade.in {opacity: 1;}所以如果你在选项卡中使用，那么你也.fade需要添加.in

看这个演示

HTML

<div class="tab-pane fade in active" id="home">

Answer 2

这有点奇怪，但我可以想到一个快速破解来让它运行。

$('.nav li.active').removeClass('active').find('a').trigger('click');

把上面的脚本放在里面$(document).ready( function() { ... })

它所做的基本上是删除您预定义的活动类，并通过模拟“点击”事件重新启用它。

小提琴：http: //jsfiddle.net/jofrysutanto/tVSv9/2/

Answer 3

另外值得一提的是，

这将起作用：

$('#yourtabs a:first').tab('show');
$('.tab-pane:first').addClass('fade in');

这不会：

$('.tab-pane:first').addClass('fade in');
$('#yourtabs a:first').tab('show');

否则你的 .fade 将在初始化时隐藏。