如何在PHP中递增data-target值

Question

<p>您好，我正在尝试为我的 WordPress 网站创建一个 3 个选项卡块。当用户单击选项卡 1 时，他们将获得选项卡 1 的内容，当用户单击选项卡 2 时，他们将获得选项卡 2 的内容，依此类推。我的问题是我不知道如何增加数据目标值。由于它的所有三个选项卡的目标值为“tab-1”，因此它不会与 CSS 相对应。其他内容不会隐藏。另外，我不希望我的活动类也被循环，我只希望黄色活动 css 类出现在第一个选项卡上。谢谢</p> <p>

//=====标签行 CSS=======
.nav-tabs li::之前{
    内容：''！重要；
}
.nav-tabs {
/* 显示：柔性； */
/* 内边距: 0 100px 0; */
/* 背景颜色: #2f1400; */
    边框底部：2px 实心$color-text；
边距底部：1rem；
}
@media（最小宽度：576px）{
    .nav-tabs .nav-item {
        最大宽度：233px；
    }
    .nav-tabs {
            弹性包裹：现在包裹；
    }
}
.nav-tabs li a.active,
.nav-tabs li:悬停a{
    背景颜色：$color-gold !important;
    颜色：$color-text！重要；
}
.nav-tabs li a{
    背景颜色：#fff；
    边框：1px 实心 $color-text !important;
/* 边框半径: 0 !important; */
    颜色：$颜色文本；
    显示：内联块；
    内边距：5px 15px；
    右边距：-1px；
    字体大小：1rem；
    字体粗细：700；
}
.nav-内容{
    最大宽度：1200px；
    显示：块；
    保证金：0 自动；
}
@media（最大宽度：575px）{
    .nav-tabs li a{ 
    边界半径：0！重要；
        宽度：100%；
        填充：1rem；
    }
    .nav-tabs li {
        宽度：100%；
    }
    
}</pre>
<pre class="brush:html;toolbar:false;"><ul class="nav nav-tabs" id="myTab" role="tablist">

    
</ul>
;

  

  <p><?php echo $description; ？></p>
  
  
    
P粉766520991481 天前501 
全部回复(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>
取消回复
发布
公益在线PHP培训，帮助PHP学习者快速成长！
关于我们免责声明Sitemap
                © php.cn All rights reserved
            

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>