Bagaimana untuk menambah nilai sasaran data dalam PHP

Question

Hai, saya cuba mencipta blok 3 tab untuk tapak WordPress saya. Apabila pengguna mengklik tab 1, mereka mendapat kandungan tab 1, apabila pengguna mengklik tab 2, mereka mendapat kandungan tab 2, dan seterusnya. Masalah saya ialah saya tidak tahu bagaimana untuk meningkatkan nilai sasaran data. Memandangkan ia mempunyai nilai sasaran "tab-1" untuk ketiga-tiga tab, ia tidak akan sepadan dengan CSS. Kandungan lain tidak akan disembunyikan. Juga, saya tidak mahu kelas aktiviti saya digelung juga, saya hanya mahu kelas css aktiviti kuning muncul pada tab pertama.谢谢

//===== CSS Baris Tab=======
.nav-tabs li::before {
    kandungan: ''!penting;
}
.nav-tabs {
/* paparan: flex; */
/* pelapik: 0 100px 0; */
/* warna latar belakang: #2f1400; */
    sempadan-bawah: 2px pepejal $warna-teks;
margin-bawah: 1rem;
}
@media (lebar min: 576px) {
    .nav-tabs .nav-item {
        lebar maksimum: 233px;
    }
    .nav-tabs {
            flex-wrap: nowrap;
    }
}
.nav-tabs li a.active,
.nav-tabs li: hover a{
    warna latar belakang: $color-gold !penting;
    warna: $color-text !penting;
}
.nav-tabs li a{
    warna latar belakang: #fff;
    sempadan: 1px pepejal $warna-teks !penting;
/* jejari sempadan: 0 !penting; */
    warna: $color-text;
    paparan: inline-block;
    padding: 5px 15px;
    jidar-kanan: -1px;
    saiz fon: 1rem;
    berat fon: 700;
}
.nav-content {
    lebar maksimum: 1200px;
    paparan: blok;
    margin: 0 auto;
}
@media (lebar maksimum: 575px) {
    .nav-tabs li a{ 
    jejari sempadan: 0 !penting;
        lebar: 100%;
        padding: 1rem;
    }
    .nav-tabs li {
        lebar: 100%;
    }
    
}

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

Buat pemboleh ubah dengan nombor yang anda mahu mulakan, seperti 1, dan kemudian gunakan kenaikan pasca PHP $a++ untuk menambah nilainya semasa anda mengulangi tab atau kandungan seterusnya.

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