如何在foreach循环中使用动态引导选项卡

Question

我有foreach循环。我想在单独的选项卡中显示每个值的结果。因此，需要动态创建选项卡。

我想在其自己的选项卡中逐一查看查询结果。比起下一个按钮，我要转到下一个标签。

因此，默认情况下，我看到第一个值。比单击“下一步”，它应该带我到显示下一个值的下一个选项卡，依此类推。

这是我的代码。

<div class="container">
  <ul class="nav nav-tabs tabbs">
    <div class="tab-content">
      <?php  
      $colors = array("red", "green", "blue", "yellow"); 

      $x = 1; 
      foreach ($colors as $value) { ?>
         <li class="active"><a data-toggle="tab" href="#<?php echo $x; ?>"><?php echo $x; ?></a></li>
         <div id="<?php echo $x; ?>" class="tab-pane fade in active">
         Hello <?php echo $x; ?>
         <button>Next</button>

         </div>
         <?php
        $x++; 
      }
      ?>  
    </div>
  </ul>
</div>

 <script>
    $(document).ready(function() {
        $('.tabbs a:first').tab('show') 
    });
</script>

如何为每个循环创建动态选项卡，所以一个选项卡的结果要比下一个选项卡的结果要浏览下一个。

先谢谢了。