Bootstrap4カードナビゲーションを使おうとしているフィドルがあります。タブは表示されますが、タブをクリックしても非アクティブなタブは非表示になりません。省略した構成アイテムがあるはずですが、表示されていません。助けて？
フィドルのコードは次のとおりです。
<div id="content" class="container">
<div class="card">
<div class="card-header bg-dark">
<ul id="ActionNav" class="nav nav-tabs bg-dark card-header-tabs"
role="tablist">
<li class="nav-item">
<a id="about-tab" class="nav-link active" href="#about"
data-toggle="tab"
role="tab" aria-controls="about"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a id="training-tab" class="nav-link" href="#training"
data-toggle="tab"
role="tab" aria-controls="training"
aria-selected="false">HPC Training</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="about" role="tabpanel"
aria-labelledby="about-tab">
<h2 class="card-title">Training</h2>
<p class="card-text">first paragraph</p>
<p class="card-text">second paragraph</p>
</div>
</div>
<div class="tab-pane fade" id="training" role="tabpanel"
aria-labelledby="training-tab">
<h2 class="card-title">Training Opportunities</h2>
<p class="card-text">training 1</p>
<p class="card-text">training 2</p>
</div>
</div>
</div>
</div>
編集フィドルでjQueryがアクティブ化されています。フィドルを実行すると、デフォルトの「ホーム」タブが表示されます。次に[トレーニング]タブをクリックすると、トレーニングコンテンツがホームコンテンツの下に表示されます。ホームの「タブ」は非表示になりません。次に、いずれかのタブをクリックしても何も起こらないように見えます。
編集2私の問題は置き忘れ</div>でした。2つのtab-paneブロックがありましたが、2番目のペインはtab-contentブロックの外側にありました。
<div id="content" class="container">
<div class="card">
<div class="card-header bg-dark">
<ul id="ActionNav" class="nav nav-tabs bg-dark card-
header-tabs" role="tablist">
<li class="nav-item">
<a id="about-tab" class="nav-link active"
href="#about" data-toggle="tab" role="tab" aria-controls="about"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a id="training-tab" class="nav-link"
href="#training" data-toggle="tab" role="tab" aria-
controls="training"
aria-selected="false">HPC Training</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="about"
role="tabpanel" aria-labelledby="about-tab">
<h2 class="card-title">Training</h2>
<p class="card-text">first paragraph</p>
<p class="card-text">second paragraph</p>
</div>
<div class="tab-pane fade" id="training"
role="tabpanel" aria-labelledby="training-tab">
<h2 class="card-title">Training
Opportunities</h2>
<p class="card-text">training 1</p>
<p class="card-text">training 2</p>
</div>
</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加