Html 默认情况下如何使引导程序 3 选项卡导航处于活动状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26049388/
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
How to make bootstrap 3 tab nav active by default?
提问by g.pickardou
Using bootstrap 3 I am trying this exameple, using class="active" in the li element. Unfortunatelly when the page initially shows up neither tab pane is shown, the whole tab content is empty. The tab navs displayed correctly and when I explicitly click on a tab, the correct pane show up.
使用引导程序 3 我正在尝试这个例子，在 li 元素中使用 class="active" 。不幸的是，当页面最初显示时既没有显示选项卡窗格，也没有显示整个选项卡内容。选项卡导航正确显示，当我明确单击选项卡时，会显示正确的窗格。
What I am missing?
我缺少什么？
Thanks in advance.
提前致谢。
<ul class="nav nav-tabs">
<li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li>
<li><a href="#graduate" data-toggle="tab">graduate</a></li>
<li><a href="#extension" data-toggle="tab">extension</a></li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
回答by Ken Herbert
You also need to specify the activeclass on the default tab-pane(and for fading tabs you need to add the inclass), thus you should change
您还需要active在默认值上指定类tab-pane（对于淡入淡出的选项卡，您需要添加in类），因此您应该更改
<div class="tab-pane fade" id="graduation">
to
到
<div class="tab-pane fade in active" id="graduation">
回答by Fangming
For whomever that are looking for an answer for bootstrap 4
对于正在寻找 bootstrap 4 答案的任何人
boostrap 4
助推器 4
<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">
Compared to boostrap 3
与 boostrap 3 相比
<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">
