So erhöhen Sie den Datenzielwert in PHP

Question

Hallo, ich versuche, einen 3-Tab-Block für meine WordPress-Site zu erstellen. Wenn der Benutzer auf Tab 1 klickt, erhält er den Inhalt von Tab 1, wenn der Benutzer auf Tab 2 klickt, erhält er den Inhalt von Tab 2 und so weiter. Mein Problem ist, dass ich nicht weiß, wie ich den Datenzielwert erhöhen kann. Da es für alle drei Registerkarten den Zielwert „tab-1“ hat, entspricht es nicht CSS. Andere Inhalte werden nicht ausgeblendet. Außerdem möchte ich nicht, dass meine Aktivitätsklasse ebenfalls in einer Schleife angezeigt wird. Ich möchte lediglich, dass die gelbe Aktivitäts-CSS-Klasse auf der ersten Registerkarte angezeigt wird.谢谢

//=====Tabulatorzeile CSS=======
.nav-tabs li::before {
    Inhalt: ''!important;
}
.nav-tabs {
/* Anzeige: Flex; */
/* padding: 0 100px 0; */
/* Hintergrundfarbe: #2f1400; */
    border-bottom: 2px solid $color-text;
Rand unten: 1rem;
}
@media (min-width: 576px) {
    .nav-tabs .nav-item {
        maximale Breite: 233px;
    }
    .nav-tabs {
            Flex-Wrap: nowrap;
    }
}
.nav-tabs li a.active,
.nav-tabs li:hover a{
    Hintergrundfarbe: $color-gold !important;
    Farbe: $color-text !important;
}
.nav-tabs li a{
    Hintergrundfarbe: #fff;
    Rahmen: 1 Pixel einfarbig $color-text !important;
/* Randradius: 0 !important; */
    Farbe: $color-text;
    Anzeige: Inline-Block;
    Polsterung: 5px 15px;
    Rand rechts: -1px;
    Schriftgröße: 1rem;
    Schriftstärke: 700;
}
.nav-content {
    maximale Breite: 1200px;
    Bildschirmsperre;
    Rand: 0 automatisch;
}
@media (maximale Breite: 575 Pixel) {
    .nav-tabs li a{ 
    Randradius: 0 !important;
        Breite: 100 %;
        Polsterung: 1rem;
    }
    .nav-tabs li {
        Breite: 100 %;
    }
    
}

<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
    $tabs = get_field('tab' );
    if( $tabs ) :
        foreach( $tabs als $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 als $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>