[解決済み] bootstrap 3 のタブが正しく動作しない
2022-02-11 08:11:50
質問
私はほとんど彼らのウェブサイトからコードをコピーした。タブは完璧に開始され、タブをクリックすると、新しいパネルがアクティブになります。しかし、アクティブ化されたタブに"active"クラスが適用されません。 これがそのコードです。
<ul class="nav nav-tabs">
<li data-toggle="tab" data-target="#a" class="active"><a href="#">a</a></li>
<li data-toggle="tab" data-target="#b" ><a href="#">b</a></li>
<li data-toggle="tab" data-target="#c" ><a href="#">c</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="a"> in tab a </div>
<div class="tab-pane fade" id="b">in tab b</div>
<div class="tab-pane fade" id="c">in tab c</div>
</div>
解決方法は?
によると
ドキュメント
を付ける必要があります。
id
はヘッダーの各リンクの上にあり、そのリンクは
li
は他のスタイルを持たない、つまり、すべての
data-target
の中にあるものは
li
. あなたのリストには
data-toggle
または
id
.
あなたのHTMLは次のようになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li><a href="#a" data-toggle="tab">a</a></li>
<li><a href="#b" data-toggle="tab">b</a></li>
<li><a href="#c" data-toggle="tab">c</a></li>
<li><a href="#d" data-toggle="tab">d</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">AAA</div>
<div class="tab-pane" id="b">BBB</div>
<div class="tab-pane" id="c">CCC</div>
<div class="tab-pane" id="d">DDD</div>
</div>
Docsによると、Javascriptは必要ないようです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン