How to use bootstrap tabs with dynamic data coming from database in php while loop [duplicate]

问题

I want to use bootstrap tabs dynamically but I can't figure out how. I basically need to get the name/id of the current tab and pass it into a PHP variable to then use in mysql WHERE clause to determine what data to show for that tab.

I can see this on the Bootstrap documentation -

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})

BUT it really doesn't help me much with my actual code.

My code works like so ->

I get the tab titles from a SELECT query and a PHP while loop
I then use a different SELECT query with a WHERE clause that I need to be like -
```
WHERE tab= $currenttab
```
to generate the info to be shown for each tab in a PHP while loop

**UPDATE - i've realised that what I need to know is how to use ajax with the above piece of code from bootstrap to POST a jquery variable to a php variable ?? **

回答1:

Reference : Link

Example from Weblesson:

<?php
$connect = mysqli_connect("localhost", "root", "", "testing1");
$tab_query = "SELECT * FROM category ORDER BY category_id ASC";
$tab_result = mysqli_query($connect, $tab_query);
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row = mysqli_fetch_array($tab_result))
{
 if($i == 0)
 {
  $tab_menu .= '
   <li class="active"><a href="#'.$row["category_id"].'" data-toggle="tab">'.$row["category_name"].'</a></li>
  ';
  $tab_content .= '
   <div id="'.$row["category_id"].'" class="tab-pane fade in active">
  ';
 }
 else
 {
  $tab_menu .= '
   <li><a href="#'.$row["category_id"].'" data-toggle="tab">'.$row["category_name"].'</a></li>
  ';
  $tab_content .= '
   <div id="'.$row["category_id"].'" class="tab-pane fade">
  ';
 }
 $product_query = "SELECT * FROM product WHERE category_id = '".$row["category_id"]."'";
 $product_result = mysqli_query($connect, $product_query);
 while($sub_row = mysqli_fetch_array($product_result))
 {
  $tab_content .= '
  <div class="col-md-3" style="margin-bottom:36px;">
   <img src="images/'.$sub_row["product_image"].'" class="img-responsive img-thumbnail" />
   <h4>'.$sub_row["product_name"].'</h4>
  </div>
  ';
 }
 $tab_content .= '<div style="clear:both"></div></div>';
 $i++;
}
?>

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Create Dynamic Tab by using Bootstrap in PHP Mysql</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <h2 align="center">Create Dynamic Tab by using Bootstrap in PHP Mysql</a></h2>
   <br />
   <ul class="nav nav-tabs">
   <?php
   echo $tab_menu;
   ?>
   </ul>
   <div class="tab-content">
   <br />
   <?php
   echo $tab_content;
   ?>
   </div>
  </div>
 </body>
</html>

来源：https://stackoverflow.com/questions/59877058/how-to-use-bootstrap-tabs-with-dynamic-data-coming-from-database-in-php-while-lo

标签

php

jquery

html

ajax

bootstrap-4