如何在PHP中递增data-target值-PHP中文网问答

您好，我正在尝试为我的 WordPress 网站创建一个 3 个选项卡块。当用户单击选项卡 1 时，他们将获得选项卡 1 的内容，当用户单击选项卡 2 时，他们将获得选项卡 2 的内容，依此类推。我的问题是我不知道如何增加数据目标值。由于它的所有三个选项卡的目标值为“tab-1”，因此它不会与 CSS 相对应。其他内容不会隐藏。另外，我不希望我的活动类也被循环，我只希望黄色活动 css 类出现在第一个选项卡上。谢谢

//=====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%;
    }
    
}

<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="presentation">
    <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="tab-content page" id="myTabContent">
<?php
    $tabs = get_field('tab' );
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $description = $tab['description'];
        ?>
  <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
  <p><?php echo $description; ?></p>
  </div>
  <?php endforeach; ?>
    <?php endif; ?>
  

 
</div>

<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>