社区 学习 工具库 休闲
搜索
简体中文
如何在PHP中递增data-target值
P粉766520991
P粉766520991 2023-09-05 09:56:59
0
1
484
<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粉766520991
                    

                        P粉766520991
                        

                    

                

                

                    

                    

                        

                            
                        

                    

                

            

            

                

                    
全部回复(1)

                    
                    
                

                


                                

                    P粉819937486
                    

                        

                            

                                P粉8199374862023-09-06 00:12:16
                                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>





                            

                                 
                                点赞 +0
                                

                                    添加回复
                                    
                                

                            

                                                            
                            
                            

                                
    
                                    
                                


                            



                        

                    


                

                

                



                

            

        


        
        

            
            

                

                    
热门专题

                    更多>
                    
                

                


                    
                

 
            

            


                

                    
 热门文章 

                

                

                    
                

            

            

                

                    
热门教程

                    更多>
                    
                

                

                    

                        
相关教程 

                        
热门推荐

                        
最新课程

                    

                    
                    
                    
                

                
            

            

                

                    
最新下载

                    更多>
                    
                


                                

                

                    

                        
网站特效 

                        
网站源码

                        
网站素材

                        
前端模板