我正在尝试制作包含学生信息的选项卡，这些信息存储在数据库中。我希望第一个选项卡显示所有学生的信息。第二个选项卡显示他们的成绩是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>
我认为您的问题是因为在while()循环中有tabs-# <div>打开标记。
$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)){
这是在创建<div id="tabs-1">、<div id="tabs-2">、<div id="tabs-3">的n编号，而不匹配结束标记</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>';。如果您实际上没有表，可能需要删除这些。
在脚本中，您正在尝试使用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。带有ID。这意味着Jquery找不到任何可以转换为选项卡的内容。
将jquery调用更改为类似的调用
<script>
$(function() {
$( ".tabsclass" ).tabs();
});
</script>
而不是使用id的use类。
<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>