Html 如何使引导3选项卡导航在默认情况下处于活动状态？

使用bootstrap3，我正在尝试这个示例，在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>

任何东西


毕业


延伸

您还需要在默认的

选项卡窗格中指定
活动的
类（对于淡入淡出的选项卡，您需要在
类中添加
），因此您应该更改

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


Bootstrap 4


引导程序3

谢谢，就这样。有趣的是，关于这一点，有多少不起作用的示例。我总是使用，除非它是我在那里找不到的。它起作用，尽管它不会使用aria selected=“true”should将选项卡本身设置为“selected”，但对我来说它不起作用
<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">

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