Comment incrémenter la valeur cible des données en PHP

Question

Bonjour, j'essaie de créer un bloc de 3 onglets pour mon site WordPress. Lorsque l'utilisateur clique sur l'onglet 1, il obtient le contenu de l'onglet 1, lorsque l'utilisateur clique sur l'onglet 2, il obtient le contenu de l'onglet 2, et ainsi de suite. Mon problème est que je ne sais pas comment augmenter la valeur cible des données. Puisqu'il a une valeur cible de "tab-1" pour les trois onglets, il ne correspondra pas au CSS. Les autres contenus ne seront pas masqués. De plus, je ne veux pas que ma classe d'activité soit également bouclée, je veux juste que la classe CSS d'activité jaune apparaisse sur le premier onglet.谢谢

//=====Tab Row CSS=======
.nav-tabs li::avant {
    contenu : '' ! important ;
}
.nav-onglets {
/* affichage : flex; */
/* remplissage : 0 100px 0; */
/* couleur d'arrière-plan : #2f1400; */
    border-bottom : 2px solid $color-text ;
marge inférieure : 1rem ;
}
@media (largeur minimale : 576 px) {
    .nav-onglets .nav-item {
        largeur maximale : 233 px ;
    }
    .nav-onglets {
            flex-wrap : nowrap ;
    }
}
.nav-tabs li a.active,
.nav-tabs li:survolez un{
    couleur d'arrière-plan : $color-gold !important;
    couleur : $color-text !important;
}
.nav-tabs li a{
    couleur d'arrière-plan : #fff ;
    bordure : 1px solide $color-text !important;
/* border-radius: 0 !important; */
    couleur : $texte-couleur ;
    affichage : bloc en ligne ;
    remplissage : 5px 15px ;
    marge droite : -1px ;
    taille de police : 1rem ;
    poids de la police : 700 ;
}
.nav-contenu {
    largeur maximale : 1 200 px ;
    bloc de visualisation;
    marge : 0 automatique ;
}
@media (largeur maximale : 575 px) {
    .nav-tabs li a{ 
    border-radius: 0 !important;
        largeur : 100 % ;
        rembourrage : 1rem ;
    }
    .nav-tabs li {
        largeur : 100 % ;
    }
    
}</pré>
<pre class="brush:html;toolbar:false;"><ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
    $tabs = get_field('tab' );
    si( $onglets ) :
        foreach( $tabs comme $tab) :
        $titre = $tab['titre'];
        ?>
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#tab-1"
    type="bouton" 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' );
    si( $onglets ) :
        foreach( $tabs comme $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

Créez une variable avec le numéro avec lequel vous souhaitez commencer, tel que 1, puis utilisez le post-incrémentation de PHP $a++ pour incrémenter sa valeur au fur et à mesure que vous parcourez l'onglet ou le contenu suivant.

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