<p>您好，我正在尝试为我的 WordPress 网站创建一个 3 个选项卡块。当用户单击选项卡 1 时，他们将获得选项卡 1 的内容，当用户单击选项卡 2 时，他们将获得选项卡 2 的内容，依此类推。我的问题是我不知道如何增加数据目标值。由于它的所有三个选项卡的目标值为“tab-1”，因此它不会与 CSS 相对应。其他内容不会隐藏。另外，我不希望我的活动类也被循环，我只希望黄色活动 css 类出现在第一个选项卡上。谢谢</p> <p> <pre class="brush:css;toolbar:false;">//=====Tab Row CSS======= .nav-tabs li::before { content: ''!important; } .nav-tabs { /* display: flex; */ /* padding: 0 100px 0; */ /* background-color: #2f1400; */ border-bottom: 2px solid $color-text; margin-bottom: 1rem; } @media (min-width: 576px) { .nav-tabs .nav-item { max-width: 233px; } .nav-tabs { flex-wrap: nowrap; } } .nav-tabs li a.active, .nav-tabs li:hover a{ background-color: $color-gold !important; color: $color-text !important; } .nav-tabs li a{ background-color: #fff; border: 1px solid $color-text !important; /* border-radius: 0 !important; */ color: $color-text; display: inline-block; padding: 5px 15px; margin-right: -1px; font-size: 1rem; font-weight: 700; } .nav-content { max-width: 1200px; display: block; margin: 0 auto; } @media (max-width: 575px) { .nav-tabs li a{ border-radius: 0 !important; width: 100%; padding: 1rem; } .nav-tabs li { width: 100%; } }</pre> <pre class="brush:html;toolbar:false;">&lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt; &lt;?php $tabs = get_field('tab' ); if( $tabs ) : foreach( $tabs as $tab) : $headline = $tab['headline']; ?&gt; &lt;li class="nav-item" role="presentation"&gt; &lt;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"&gt;&lt;?php echo $headline; ?&gt;&lt;/a&gt; &lt;/li&gt; &lt;?php endforeach; ?&gt; &lt;?php endif; ?&gt; &lt;/ul&gt; &lt;div class="tab-content page" id="myTabContent"&gt; &lt;?php $tabs = get_field('tab' ); if( $tabs ) : foreach( $tabs as $tab) : $description = $tab['description']; ?&gt; &lt;div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1"&gt; &lt;p&gt;&lt;?php echo $description; ?&gt;&lt;/p&gt; &lt;/div&gt; &lt;?php endforeach; ?&gt; &lt;?php endif; ?&gt; &lt;/div&gt;</pre> </p>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <?php
    $tabIndex = 1;
    $tabs = get_field('tab');
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $headline = $tab['headline'];
        ?>
    <li class="nav-item" role="presentation">
      <a class="nav-link<?php if ($tabIndex === 1) { echo ' active'; } ?>" id="home-tab" data-toggle="tab" data-target="#tab-<?php echo $tabIndex; ?>" type="button" role="tab" aria-controls="home" aria-selected="true">
        <?php echo $headline; ?>
      </a>
    </li>
    <?php $tabIndex++; ?>
    <?php endforeach; ?>
    <?php endif; ?>
</ul>
<div class="tab-content page" id="myTabContent">
  <?php
    $tabIndex = 1;
    $tabs = get_field('tab');
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $description = $tab['description'];
        ?>
    <div class="tab-pane fade show<?php if ($tabIndex === 1) { echo ' active'; } ?>" id="tab-<?php echo $tabIndex; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $tabIndex; ?>">
      <p>
        <?php echo $description; ?>
      </p>
    </div>
    <?php $tabIndex++; ?>
    <?php endforeach; ?>
    <?php endif; ?>
</div>