Question

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

<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课程添加到您的有效标签内容

背后的原因是bootstrap css .fade.in {opacity: 1;}中存在预定义样式，因此如果您在标签中使用.fade，那么您还需要添加.in

请参阅 demo

HTML

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

Answer 2

这有点奇怪，但我想到一个快速的黑客来让这个运行。

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

将上述脚本放在$(document).ready( function() { ... })

中

它的作用基本上是删除你预先定义的活动类，并通过模拟'click'事件重新启用它。

小提琴：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将隐藏在init。

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

3 个答案: