如何在PHP中递增data-target值
P粉766520991
P粉766520991 2023-09-05 09:56:59
[CSS3讨论组]
<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;">&lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt; &lt;?php $tabs = get_field('tab' ); if( $tabs ) : foreach( $tabs as $tab) : $headline = $tab['headline']; ?&gt; &lt;li class="nav-item" role="presentation"&gt; &lt;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"&gt;&lt;?php echo $headline; ?&gt;&lt;/a&gt; &lt;/li&gt; &lt;?php endforeach; ?&gt; &lt;?php endif; ?&gt; &lt;/ul&gt; &lt;div class="tab-content page" id="myTabContent"&gt; &lt;?php $tabs = get_field('tab' ); if( $tabs ) : foreach( $tabs as $tab) : $description = $tab['description']; ?&gt; &lt;div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1"&gt; &lt;p&gt;&lt;?php echo $description; ?&gt;&lt;/p&gt; &lt;/div&gt; &lt;?php endforeach; ?&gt; &lt;?php endif; ?&gt; &lt;/div&gt;</pre> </p>
P粉766520991
P粉766520991

全部回复(1)
P粉819937486

以您想要开始的数字创建一个变量,例如 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培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号