如何使 bootstrap 3 选项卡导航默认处于活动状态？

Question

使用 bootstrap 3 我正在尝试这个示例，在 li 元素中使用 class=“active”。不幸的是，当页面最初出现时，两个选项卡窗格都没有显示，整个选项卡内容是空的。选项卡导航正确显示，当我明确单击选项卡时，会显示正确的窗格。

我缺少什么？

提前致谢。

 <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>

原文由 g.pickardou 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您还需要在默认值上指定 active 类 tab-pane （对于淡化标签，您需要添加 in ），因此您应该更改

<div class="tab-pane fade" id="graduation">

到

引导程序 3

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

引导程序 4

 <div class="tab-pane fade show active" id="graduation">

原文由 Ken Herbert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

引导程序 4

 <div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">

引导程序 3

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

原文由 Fangming 发布，翻译遵循 CC BY-SA 4.0 许可协议