<p>您好,我正在尝试为我的 WordPress 网站创建一个 3 个选项卡块。当用户单击选项卡 1 时,他们将获得选项卡 1 的内容,当用户单击选项卡 2 时,他们将获得选项卡 2 的内容,依此类推。我的问题是我不知道如何增加数据目标值。由于它的所有三个选项卡的目标值为“tab-1”,因此它不会与 CSS 相对应。其他内容不会隐藏。另外,我不希望我的活动类也被循环,我只希望黄色活动 css 类出现在第一个选项卡上。谢谢</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>
以您想要开始的数字创建一个变量,例如 1,然后使用 PHP 的后增量
$a++
在您循环处理下一个选项卡或内容时增加其值。