Как сделать bootstrap 3 tab nav активным по умолчанию?

используя bootstrap 3 я пробую этот exameple, используя class= "active" в элементе li. К сожалению, когда страница изначально не отображается ни на одной панели вкладок, все содержимое вкладки пусто. Вкладки отображаются правильно, и когда я явно нажимаю на вкладку, отображается правильная панель.

чего мне не хватает?

спасибо заранее.

<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>
11
css3 html5 twitter-bootstrap twitter-bootstrap-3

2 ответов

вам также необходимо указать active класс по умолчанию tab-pane (и для исчезающих вкладок вам нужно добавить in class), таким образом, вы должны изменить

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

to

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

для тех, кто ищет ответ для bootstrap 4

boostrap 4

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

по сравнению с boostrap 3

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