带有 mysql 和 pgp 的 jquery 选项卡答案

【问题标题】：jquery tabs with mysql and pgp带有 mysql 和 pgp 的 jquery 选项卡
【发布时间】：2013-07-08 16:11:08
【问题描述】：

我正在尝试制作包含有关学生信息的选项卡，这些信息存储在数据库中。我希望第一个选项卡显示所有学生的信息。第二个选项卡显示成绩为 A 的学生的信息，第三个选项卡显示成绩为 B 的学生的信息。

我编写了这段代码，但只有第一个选项卡显示了学生的信息，而第二个和第三个选项卡没有显示任何内容。

代码有什么问题？

<html>
<head>

<title>students table</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">1</a></li>
<li><a href="#tabs-2">2</a></li>
<li><a href="#tabs-3">3</a></li>
</ul>


<?php
$connection = mysql_connect("","","");
if (!$connection)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("", $connection);


$result = mysql_query("SELECT * FROM studentTable");
while($row = mysql_fetch_array($result))
{

?>  

<div id="tabs-1">

<?php 
echo "Student id: '" . $row["id"];
echo "Student name: '" . $row["name"];
echo "Student grade: '" . $row["grade"];
echo '</table>';
}
?>

</div>


<?Php 

$result2 = mysql_query("SELECT * FROM studentTable WHERE grade = 'A'");   
while($row = mysql_fetch_array($result2))
{
?>

<div id="tabs-2">

<?php 
echo "Student id: '" . $row["id"];
echo "Student name: '" . $row["name"];
echo "Student grade: '" . $row["grade"];
echo '</table>';
}
?>

</div>

<?php  
$result3 = mysql_query("SELECT * FROM studentTable WHERE grade = 'B'");   
while($row = mysql_fetch_array($result3))  
{
?>     


<div id="tabs-3">

<?php 
echo "Student id: '" . $row["id"];
echo "Student name: '" . $row["name"];
echo "Student grade: '" . $row["grade"];
echo '</table>';
}
?>     

</div>

</div>
</body>
</html>

【问题讨论】：

使用 mysqli 代替 mysql，因为它已经过时，mysql 不再支持
对每个选项卡的行使用不同的变量名称，例如 row1 row2 等

标签： php jquery mysql tabs

【解决方案1】：

我认为您的问题是因为您的 tabs-# <div> 开始标签在您的 while() 循环中。

$result = mysql_query("SELECT * FROM studentTable");
while($row = mysql_fetch_array($result))
{  
?>  
<div id="tabs-1">  //this here needs to be above/outside while($row = mysql_fetch_array($result)){

这是创建 n 数量的 <div id="tabs-1">,<div id="tabs-2">,<div id="tabs-3">，没有匹配结束标签 </div>，所以现在 <div id="tabs-2"> 和 <div id="tabs-3"> 嵌套在 <div id="tabs-1"> 中，而 jQuery 没有不知道将tabs绑定到哪个。

尝试在 while() 循环之前移动它们 -

<div id="tabs-1">
<?php 
$result = mysql_query("SELECT * FROM studentTable");
while($row = mysql_fetch_array($result))
{
 ...
}
?>
</div>
<div id="tabs-2">
<?php 
$result2 = mysql_query("SELECT * FROM studentTable WHERE grade = 'A'");   
while($row = mysql_fetch_array($result2))
{
...
}
?>   
</div>
<div id="tabs-3">
<?php  
$result3 = mysql_query("SELECT * FROM studentTable WHERE grade = 'B'");   
while($row = mysql_fetch_array($result3))  
{
...
}
?>     
</div>

此外，您在每个选项卡 div 的末尾都有 echo '</table>';。如果您实际上没有桌子，可能需要删除它们。

【讨论】：

【解决方案2】：

在您的脚本中，您尝试使用 Jquery 的选项卡方法。

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

这是在 HTML 中寻找

<div id='tabs'> 
    You're tabs in here
</div>

假设您的 SQL 语句没有返回“NULL”，那么我会说您的问题是您将您命名为 div 的 tab-1、tab-2、tab-3。带身份证。这意味着 Jquery 找不到任何可以变成选项卡的东西。

将您的 jquery 调用更改为类似的内容

 <script>
$(function() {
$( ".tabsclass" ).tabs();
});
</script>

而不是使用 id 的使用类。

<div class='tabsclass' id='tab-1'> 
    You're tabs in here
</div>
<div class='tabsclass' id='tab-2'> 
    You're tabs in here
</div>
<div class='tabsclass' id='tab-3'> 
    You're tabs in here
</div>

【讨论】：

OP 有正确的 html 来绑定标签 - <div id="tabs"><ul><li><a href="#tabs-1">1</a></li><li><a href="#tabs-2">2</a></li><li><a href="#tabs-3">3</a></li></ul> ... </div>