如何使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

Answer 1

您还需要在默认的tab-pane上指定active类（对于淡入淡出的选项卡，您需要添加in类），因此您应该更改：

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

为了

Bootstrap 3

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

Bootstrap 4

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

- Ken Herbert

---

谢谢，就这些了。有趣的是，关于这个问题有很多不起作用的示例。 - g.pickardou

我总是使用官方文档，除非在那里找不到我需要的东西。 - Ken Herbert

它有效，尽管它没有将选项卡本身设置为 "selected" 并具有 aria-selected="true"，但对我来说目前无法工作。 - Caio Wilson

要突出显示选项卡本身，请使用<a href="#graduation" class="active" data-toggle="tab"> - Adindu Stevens

Answer 2

Bootstrap 4

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

Bootstrap 3

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

- Fangming

Answer 3

如果有人在这里寻找与react-bootstrap相关的解决方案（就像我一样），那么可以在Tab组件上指定defaultActiveKey属性。参考资料

- Rohan Lekhwani