web-dev-qa-db-ja.com

bootstrap 3 tab navをデフォルトでアクティブにする方法は？

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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
16
g.pickardou

また、デフォルトのtab-paneにactiveクラスを指定する必要があります（フェードタブの場合はinクラスを追加する必要があります）。したがって、次のように変更する必要があります。

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

に

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

bootstrap 4の答えを探している人のために

ブースター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">
16
Fangming