<p>こんにちは。WordPress サイト用に 3 つのタブ ブロックを作成しようとしています。ユーザーがタブ 1 をクリックするとタブ 1 のコンテンツが取得され、ユーザーがタブ 2 をクリックするとタブ 2 のコンテンツが取得されます。私の問題は、データの目標値を増やす方法がわからないことです。 3 つのタブすべてのターゲット値が「tab-1」であるため、CSS には対応しません。他のコンテンツは非表示になりません。また、アクティビティ クラスもループさせたくなく、黄色のアクティビティ CSS クラスを最初のタブに表示したいだけです。ありがとうございます</p> <p> <pre class="brush:css;toolbar:false;">//=====タブ行 CSS======= .nav-tabs li::before { 内容: ''!重要; } .nav-tabs { /* 表示: フレックス; */ /* パディング: 0 100px 0; */ /* 背景色: #2f1400; */ border-bottom: 2px ソリッド $color-text; マージン-ボトム: 1レム; } @media (最小幅: 576px) { .nav-tabs .nav-item { 最大幅: 233px; } .nav-tabs { フレックスラップ:nowrap; } } .nav-tabs li a.active、 .nav-tabs li:hover a{ 背景色: $color-gold !重要; 色: $color-text !重要; } .nav-tabs li a{ 背景色: #fff; ボーダー: 1px ソリッド $color-text !重要; /* 境界半径: 0 !重要; */ 色: $color-text; 表示: インラインブロック; パディング: 5px 15px; マージン右: -1px; フォントサイズ: 1rem; フォントの太さ: 700; } .nav-content { 最大幅: 1200ピクセル; 表示ブロック; マージン: 0 自動; } @media (最大幅: 575px) { .nav-tabs li a{ 境界半径: 0 !重要; 幅: 100%; パディング: 1レム; } .nav-tabs li { 幅: 100%; } }</pre> <pre class="brush:html;toolbar:false;"><ul class="nav nav-tabs" id="myTab" role="tablist"> <?php $tabs = get_field('tab' ); if( $tabs ) : foreach( $tabs as $tab) : $headline = $tab['headline']; ?> <li class="nav-item" role="プレゼンテーション"> <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#tab-1" type="button" role="tab" aria-controls="home" aria-selected="true"><?php echo $headline; ?></a> </li> <?php endforeach; ?> <?php endif; ?> </ul> <div class="タブコンテンツページ" id="myTabContent"> <?php $tabs = get_field('tab' ); if( $tabs ) : foreach( $tabs as $tab) : $説明 = $tab['説明']; ?> <div class="tab-pane フェード表示がアクティブ" id="tab-1" role="tabpanel" aria-labelledby="tab-1"> <p><?php echo $description; ?></p> </div> <?php endforeach; ?> <?php endif; ?> </div></pre> </p>