Bootstrapのnavタブでタブ切り替えを行う際、タグの選択は重要な要素となります。
tab-contentとtab-paneのクラスは、それぞれdivタグとともに使用することで正しく機能します。これらのクラスをulやliタグと一緒に使用した場合、タブの切り替えが正常に動作しない可能性があります。
例えば、以下のようなコードは正しく動作しません。
<ul class="tab-content">
<li class="tab-pane active" id="home">...</li>
<li class="tab-pane" id="profile">...</li>
</ul>代わりに、以下のようにdivタグを使用します。
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
</div>