如何在PHP中遞增data-target值

Question

您好，我正在嘗試為我的 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>

Answer 1

以您想要開始的數字建立一個變量，例如1，然後使用PHP 的後增量 $a 在您循環處理下一個選項卡或內容時增加其值。

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