How to increment data-target value in PHP
P粉766520991
2023-09-05 09:56:59
<p>Hi, I'm trying to create a 3 tab block for my WordPress site. When the user clicks tab 1, they get the contents of tab 1, when the user clicks tab 2, they get the contents of tab 2, and so on. My problem is that I don't know how to increase the data target value. Since it has a target value of "tab-1" for all three tabs, it won't correspond to CSS. Other content will not be hidden. Also, I don't want my activity class to be looped as well, I just want the yellow activity css class to appear on the first tab. Thank you</p>
<p>
<pre class="brush:css;toolbar:false;">//=====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%;
}
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Create a variable with the number you want to start with, e.g. 1, and then use PHP's post-increment
$aIncrement as you loop through the next tab or content its value.<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>