twitter-bootstrap twitter bootstrap 3 选项卡视图淡入淡出无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18756981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap 3 tab view fade does not work properly
提问by werva
I use twitter bootstrap 3 applying .fadeto show tabs with fade. That's fine except for the first tab's content is not shown for the first time:
我使用 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>
Where is the problem inside the code?
代码里面的问题在哪里？
回答by Vikas Ghodke
You need to add inclass to your active tab content
您需要为in活动标签内容添加类
The reason behind is there is predefined style in bootstrap css .fade.in {opacity: 1;}so if you are using .fadein tab then you need to add .intoo
背后的原因是有在引导CSS预定义的样式.fade.in {opacity: 1;}，所以如果你正在使用.fade的标签，那么你需要添加.in过
See this demo
看这个演示
HTML
HTML
<div class="tab-pane fade in active" id="home">
回答by JofryHS
It is a bit peculiar, but I could think of a quick hack to get this running.
这有点奇怪，但我可以想到一个快速的技巧来运行它。
$('.nav li.active').removeClass('active').find('a').trigger('click');
Put the above script inside $(document).ready( function() { ... })
把上面的脚本放在里面 $(document).ready( function() { ... })
What it does is basically remove your pre-defined active class, and re-enable it by mocking the 'click' event.
它所做的基本上是删除您预定义的活动类，并通过模拟 'click' 事件重新启用它。
回答by antk3
Also worth mentioning,
另外值得一提的是，
This will work:
这将起作用：
$('#yourtabs a:first').tab('show');
$('.tab-pane:first').addClass('fade in');
This won't:
这不会：
$('.tab-pane:first').addClass('fade in');
$('#yourtabs a:first').tab('show');
Otherwise your .fade will be hidden on init.
否则您的 .fade 将在初始化时隐藏。
