我怎样才能用php动态生成不同的bootstrap选项卡

时间:2017-07-29 19:07:15

标签: php

我想为每个帖子生成不同的bootstrap nav-tabs,并且选项卡列表会有所不同,基本上是基于某些条件。一些发布它可能有3个标签,一些发布它可能2但是至少应该有一个标签。如下图所示

This Image

我面对的每个帖子第一个标签类的问题应该是.active - 我不能保留同一帖子的其余标签。每个帖子的下一个标签ID和不同的标签内容无法正确同步。它变得重复了。还要注意查询是完美的。只是逻辑问题

以下是代码结构:

 <ul class="nav nav-tabs">
    <?php  
        $qu= "sql query for generating all tabs with some condition";
        $rr=mysqli_query($conn,$qu);
        while($tab1 =mysqli_fetch_array($rr)){ 
    ?>
       <li class=""><a data-toggle="tab" href="#<?php echo $tab1['field_name']; ?>"><?php echo $tab1['field_name'];?></a></li>
           // class active problem
    <?php } ?>  

  </ul>

  <div class="tab-content">
      <?php 
        $qu= "sql query for generating all tabs with some condition"; //again i run same query of above
        $rr=mysqli_query($conn,$qu);
        while($tab1 =mysqli_fetch_array($rr)) { 
      ?>
      <div id="<?php echo $tab1['field_name']; " class="tab-pane fade in active">  //here also fade in active
         <table> 
           <thead
            <tr> all rows </tr>
          </thead
           <?php  
                $qu1= "sql query for generating result";
                $resout = mysqli_query($conn, $qu1);
                if(mysqli_num_rows($resout) > 0){  
                while($row2 =mysqli_fetch_array($resout)){
           ?>
          <tbody
            <tr> <td><?php echo $row2['field_name'];?></td>  </tr>
          </tbody>
             <?php 
                } 
                   }
                else {
                       echo 'No result Found';
                   } 
             ?>
         </table>

       </div>
    </div>
     <?php } ?> <!-- End of the While Loop -->
 </div>

请告诉我如何解决这个逻辑,以便每个帖子的所有选项卡都应该正确显示第一个带有.active类的选项卡。如果问题不清楚,那么请评论。我会改变这条线。因为我需要这个帮助。

3 个答案:

答案 0 :(得分:0)

有很多方法可以实现这一目标。例如,您可以在while循环外设置一个值为1的变量。

$flag = 1;

然后在while循环中,在第一次迭代中,

if($flag == 1){
    print('<li class="active">');
    $flag = 0;
}
else{
    print('<li>');
}

此外,您应该考虑更好地构建代码。首先在单独的文件中获取所有数据,然后将其传递给HTML模板。

答案 1 :(得分:0)

$
  

虽然我不明白这个问题,但我相信它会有所帮助。

     

检查我已解决了活动问题

答案 2 :(得分:0)

你可以试试这种方式

<?php $tab_array = array(array( 'name' => 'Section A' , 'html' => 'HTML DATA OF Section A' ) , array( 'name' => 'Section B' ,  'html' => 'HTML DATA OF Section B' )); ?>

<ul class="nav nav-tabs">
    <?php foreach($tab_array as $key => $tab){  ?>
        <?php if($key==0){ ?>
            <li class="active"><a data-toggle="tab" href="#section<?php echo $key; ?>"><?php echo $tab['name']; ?></a></li>
        <?php }else{ ?>
             <li><a data-toggle="tab" href="#sectionB<?php echo $key; ?>"><?php echo $tab['name']; ?></a></li>
        <?php } ?>
    <?php } ?>
</ul>


<div class="tab-content">

    <?php foreach($tab_array as $key => $tab){  ?>
        <?php if($key==0){ ?>
            <div id="section<?php echo $key; ?>" class="tab-pane fade in active">
                <?php echo $tab['html']; ?>
            </div>
        <?php }else{ ?>
             <div id="section<?php echo $key; ?>" class="tab-pane fade in">
                <?php echo $tab['html']; ?>
            </div>
        <?php } ?>
    <?php } ?>     


 </div>