动态标签显示相同的记录 [英] The dynamic tabs are presenting the same records
问题描述
我正在尝试使用Bootstrap Framework为创建的电影网站使用PHP和MySQL创建动态选项卡.这些电影将分为现在显示"和即将上映".
I am trying to create a dynamic tab with PHP and MySQL using Bootstrap Framework for the movie website that I am creating. The movies will be segregated into Now Showing and Coming Soon.
预期结果:应根据类别(正在显示"或即将上映")显示电影.
Expected Result: The movies should be displayed based on the category (Now Showing or Coming Soon).
实际结果:动态"标签不起作用.即将上映"下的电影显示在正在播放"中.此外，网站仅显示第二条记录(从数据库开始).没有显示正在显示"和即将推出"的第一条记录.
Actual Result: The dynamic tab is not working. Movies that are under "Coming Soon" are displayed in "Now Showing". In addition, the website only displays 2nd record onwards (from the database). The first record for "Now Showing" which is theand "Coming Soon" are not displayed.
无论单击正在显示"或即将到来"选项卡，都将显示相同的内容(仅当我将鼠标悬停时才可以看到即将到来"选项卡，这是我需要解决的另一个问题).电影《被诅咒的教训》应该在即将上映的电影中放映.没有显示正在显示"和即将到来"的第一条记录.
The same content is displayed regardless of clicking "Now Showing" or "Coming Soon" tab (The "Coming Soon" tab can only be seen if I hover which is another issue that I need to fix). The movie 'The cursed lesson' should be shown in Coming Soon. The first record for 'Now Showing' and 'Coming Soon' are not shown.
我非常感谢您在解决这些问题方面所提供的帮助和建议.我已经尝试了好几天了，但是似乎还是想不通.
I truly appreciate your help and advice in fixing these problems. I have been trying to solve these for days but I just can't seem to figure it out.
这是我的代码:
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'movie';
$conn = new mysqli($servername, $username, $password, $dbname);
$tab_query = "SELECT * FROM category ORDER BY Category_ID";
$tab_result = mysqli_query($conn, $tab_query);
$tab_menu = '';
$tab_content = '';
$count = 0;
while ($row = mysqli_fetch_array($tab_result)) {
if ($count == 0) {
$tab_menu .= '<li class="nav-item"><a class="nav-link active" 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 class="nav-item"><a class="nav-link" 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 movie WHERE Category_ID = '".$row["Category_ID"]."'";
$product_result = mysqli_query($conn, $product_query);
while($sub_row = mysqli_fetch_array($product_result))
{
$tab_content .= '
<div class="col-md-3" style="margin-bottom:36px;">
<img src="'.$sub_row["Image_URL"].'" class="img-responsive img-thumbnail" />
<h4>'.$sub_row["Title"].'</h4>
</div>
';
}
$tab_content .= '<div style="clear:both"></div></div>';
$count++;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Movie Testing Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<!--Bootstrap CSS-->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Custom CSS-->
<link rel="stylesheet" href="css/main.css">
<!--jQuery-->
<script defer
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script defer
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm"
crossorigin="anonymous"></script>
<script defer src="js/main.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<?php echo $tab_menu; ?>
</ul>
<div class="tab-content">
<?php echo $tab_content; ?>
</div>
</div>
</body>
</html>
以下是我的数据库摘要:
Here are snippets of my database:
电影表:
类别表:
推荐答案
我在视图中发现了问题，而不是在从db收集数据时发现了问题.我根据以下示例修改了html结构: https://bootsnipp.com/snippets/exE6D
I was found the problem in the view and not in data collection from db. I modified the html structure based on this sample: https://bootsnipp.com/snippets/exE6D
查找有关Bootstrap选项卡导航的更多信息: https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
Find out more about Bootstrap tab navigations: https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'movie';
$conn = new mysqli($servername, $username, $password, $dbname);
$tab_query = "SELECT * FROM category ORDER BY Category_ID";
$tab_result = mysqli_query($conn, $tab_query);
$tab_menu = '';
$tab_content = '';
$count = 0;
while ($row = mysqli_fetch_array($tab_result)) {
if ($count == 0) {
$tab_menu .= '<a class="nav-item nav-link active" id="' . $row["Category_ID"] . '" data-toggle="tab" href="#nav-' . $row["Category_ID"] . '" role="tab" aria-controls="nav-' . $row["Category_ID"] . '" aria-selected="true">' . $row["Category_Name"] . '</a>';
$tab_content .= '<div class="tab-pane fade show active" id="nav-' . $row["Category_ID"] . '" role="tabpanel" aria-labelledby="nav-' . $row["Category_ID"] . '-tab">';
} else {
$tab_menu .= '<a class="nav-item nav-link" id="' . $row["Category_ID"] . '" data-toggle="tab" href="#nav-' . $row["Category_ID"] . '" role="tab" aria-controls="nav-' . $row["Category_ID"] . '" aria-selected="false">' . $row["Category_Name"] . '</a>';
$tab_content .= '<div class="tab-pane fade show" id="nav-' . $row["Category_ID"] . '" role="tabpanel" aria-labelledby="nav-' . $row["Category_ID"] . '-tab">';
}
$product_query = "SELECT * FROM movie WHERE Category_ID = '".$row["Category_ID"]."'";
$product_result = mysqli_query($conn, $product_query);
while($sub_row = mysqli_fetch_array($product_result))
{
$tab_content .= '
<div class="col-md-3" style="margin-bottom:36px;">
<img src="'.$sub_row["Image_URL"].'" class="img-responsive img-thumbnail" />
<h4>'.$sub_row["Title"].'</h4>
</div>';
}
$tab_content .= '<div style="clear:both"></div></div>';
$count++;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Movie Testing Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Custom CSS-->
<link rel="stylesheet" href="css/main.css">
<!--jQuery-->
<script defer
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm"
crossorigin="anonymous"></script>
<script defer src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<?php echo $tab_menu; ?>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<?php echo $tab_content; ?>
</div>
</div>
</div>
</div>
</body>
</html>
这篇关于动态标签显示相同的记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
