如何使用PHP在while循环中填充引导导航选项卡上的数据

Question

我在list-group有nav-tabs ， while loop在while loop都有它们，我设法从mysql到nav-tabs提取数据。 问题是内容仅出现在第一个nav-tabs ，当我移到选项卡的下一行时，我将我重定向到选项卡的第一行，而不是显示自己的数据，因为我在while loop内while loop显示了所有独立的内容在每一行上。 我有两行nav-tabs 。

我的php bootstrap代码：

                <!-- Start List Group -->
           <ul  class="list-group  p-1 col-lg-12 ">

       <?php while($mysql_result = mysql_fetch_array($myslQuery)){ ?>

   <li name="applicant"  class="list-group-item">

 <!-- Left side of profile -->
 <div class="col-lg-3 col-md-3">
  <center>
    <span class="text-left">
    <img src="<?php echo "../".$mysql_result['passport_photofile'];?>" class=" img-lg  rounded-circle">        
  </span></center>

        <div class="table-responsive panel">
         <table class="table">
             <tbody>
             <!-- Decision buttons    -->
                 <tr>
                <td class="text-center">

             <button class="btn btn-success text-white btn-block"><i class="fa fa-check-circle"></i>Admit</button>       

              <button class="btn btn-dark text-white btn-block"><i class="fa fa-times"></i>Reject</button>

                </td>
                 </tr>
                </tbody>
                </table>
                   </div>        
                    </div>
                    <!-- end -->

  <div class="col-lg-9 col-md-9">

       <!-- Nav Tabs headers -->
      <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#PersonalInf" class="text-primary"><i class="fa fa-check"></i> Personal info</a></li>

          <li><a data-toggle="tab" href="#DegreeAndC" class="text-primary"><i class="fa fa-check"></i> Degree & certificate</a></li>

      </ul>
      <!-- end -->

        <div class="tab-content">
        <!-- Presonal info -->
         <div id="PersonalInf" class="tab-pane fade">
            <div class="table-responsive panel">
                 <div class="item">

          <ul class="">
           <li>Fist name: <?php echo  $mysql_result['firstname']; ?>  
           </li> 
           <li>Last name: <?php echo  $mysql_result['lastname']; ?>
           </li>
           <li>Gender: <?php echo  $mysql_result['gender']; ?>
           </li>  

          </ul>
          </div>           
             </div>
              </div>
                <!-- end -->


  <!-- Degree and certificate -->
            <div id="DegreeAndC" class="tab-pane fade">
            <div class="table-responsive panel">

          <div class="item">      
          <ul class="">
           <li>Program: <?php echo  $mysql_result['program']; ?>  
           </li> 
          <li>Academic year: <?php echo  $mysql_result['academic_year']; ?>
           </li>
          </ul>
      </div> 
      </div>
       </div>
      <!-- End -->

                 </div>
              <!-- Tab content -->

            </div>
               </li>
                <?php } ?>

                      </ul> 

Answer 1

您使用的是重复的ID，因此，当您单击链接时，它将以找到的第一个为焦点。 您可以使用计数器或记录ID使其唯一。

$i = 0;

while($mysql_result = mysql_fetch_array($myslQuery)) {
?>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#PersonalInf-<?= $i ?>" class="text-primary"><i class="fa fa-check"></i> Personal info</a></li>
<!-- Rest of your code -->
<div id="PersonalInf-<?= $i ?>" class="tab-pane fade">
<?php
    $i++;
}

但是，我认为您根本不需要锚点，因为要能够单击窗格，必须将其放在视口中。