ナビゲーションタブを正しく機能させようとしています。別のタブをクリックするたびに、ul部分が正しく更新されてアクティブになりますが、<div class="tab-content">が正しく更新されません。常に1つの部分が表示されます。
<ul class="nav nav-tabs" data-tabs="tabs">
<li data-toggle="tab" class="active"><a href="#1">1</a></li>
<li data-toggle="tab"><a href="#2">2</a></li>
<li data-toggle="tab"><a href="#3">3</a></li>
<li data-toggle="tab"><a href="#4">4</a>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="1">
<h3>1</h3>
</div>
<div class="tab-pane fade" id="2">
<h3>2</h3>
</div>
<div class="tab-pane fade" id="3">
<h3>3</h3>
</div>
<div class="tab-pane fade" id="4">
<h3>4</h3>
</div>
</div>
また、私が使用しているスクリプトは次のとおりです。
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
どんな助けでも大歓迎です。以前に別のWebページでこれを実行しましたが、正常に機能しています。何らかの理由で、ここでは機能していません。ありがとうございました！
編集：bootstrap.jsファイルを使用して、または使用せずに試したが、機能しないことを言及する必要があるように感じます。bootstrap.min.jsファイルだけが必要なことはわかっていますが、両方を試して何が起こるかを確認したいと思いました。
data-toggle適切な場所にする必要があります。
正しい方法：-
<li class="active">
<a href="#1" data-toggle="tab">1</a>
</li>とにかく、動作中のJSFiddleはここにあります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加