jQuery Bootstrap 选项卡 - 活动类无法加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32078987/
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
Bootstrap tab - active class not working on page loading
提问by delphirules
My code is below. Notice the tab 'one' is active. But the problem is when i open the page, the tab really shows active, BUT the tab content does not show ; it only shows when i click on the tab manually. How to fix this ?
我的代码如下。请注意选项卡“一”处于活动状态。但问题是当我打开页面时，选项卡确实显示为活动状态，但选项卡内容不显示；它仅在我手动单击选项卡时显示。如何解决这个问题？
<ul class="nav nav-tabs">
<li class="nav active"><a data-toggle="tab" href="#one">One</a>
</li>
<li class="nav"><a data-toggle="tab" href="#two">Two</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="one">
<p>Tab one content</p>
</div>
<div class="tab-pane fade in" id="two">
<p>Tab two content</p>
</div>
</div>
回答by jafaritaqi
<div class="tab-pane fade in" id="one"> <p>Tab one content</p> </div>
Change this to
将此更改为
<div class="tab-pane active in" id="one"> <p>Tab one content</p> </div>
回答by Robin Carlo Catacutan
Add class activealso on the selected tab content
active在选定的选项卡内容上也添加类
<ul class="nav nav-tabs">
<li class="nav active"><a data-toggle="tab" href="#one">One</a></li>
<li class="nav"><a data-toggle="tab" href="#two">Two</a></li>
</ul>
<div class="tab-content">
<!-- Show this tab by adding `active` class -->
<div class="tab-pane fade in active" id="one">
<p>Tab one content</p>
</div>
<!-- I removed `in` class here so it will have a fade in effect when showed -->
<div class="tab-pane fade" id="two">
<p>Tab two content</p>
</div>
</div>
Have a look at this: Fiddle
看看这个： 小提琴
回答by Melanie Seifert
It seems that having a combination of "fade" with the "active" class on the tab content seems to be conflicting on my particular usage of the tab panels. It still didn't load the content on the initial page load.
似乎在选项卡内容上将“淡入淡出”与“活动”类结合使用似乎与我对选项卡面板的特定用法相冲突。它仍然没有在初始页面加载时加载内容。
Once I removed "fade" then things seemed to work.
一旦我删除了“淡入淡出”，事情似乎就行了。
<div class="tab-pane active" id="sales" role="tabpanel">
回答by wecky
I had the same problem but using navpills.
我有同样的问题，但使用导航丸。
None of the other solutions worked for me. Finally I solved it using jquery:
其他解决方案都不适合我。最后我用jquery解决了它：
$(document).ready(function ()
{
// somehow first navpill will not look active on page load (although it is...)
$('.navpill.active').trigger('click');
});
I guess it would work the same for navtabs, only use $('.nav.active') to locate the correct element.
我想它对导航表的工作方式相同，只使用 $('.nav.active') 来定位正确的元素。
