我正在构建一个使用 Jquery-UI 选项卡的页面。每个选项卡调用不同的 php 页面。
每个 php 标签页在加载时使用 php include() 函数返回另一个 php 页面。在每个php标签页中，页面顶部都有一些jquery来控制浏览mysql记录的按钮。当按下按钮时，Jquery 将发布到最初加载到选项卡上的相同 php 脚本。
最初包含的脚本，然后使用附加到导航按钮的 Jquery 发布到该脚本返回一个表单，该表单包含一个来自 mysql db 的表。
在操作中，用户将单击一个选项卡，该表单将在加载时包含在内。然后，用户可以使用左右箭头滚动浏览数据库中的值。每个箭头按下都会向表单发送一个 Jquery 帖子，并包含相同的 php 脚本，但具有更新的 mysql 值。
到目前为止这项工作，但问题是切换选项卡时。选项卡的不同之处仅在于它们包含不同的表单和对不同表的 mysql 查询。除此之外，它们的操作相同。
当用户按下导航按钮时，会发送包含主键值的字段，以便在数据库中查询下一个值。Jquery 使用表单输入上的 name 选项来保存主键值。
起初，我虽然可能存在页面未加载的问题，因此 Jquery 传递了错误的值，所以我尝试在每个选项卡上将表单输入名称命名为相同并且在每个选项卡上也不同，但我得到了两种方式的结果相同。
发生的情况是，在页面加载时，单击选项卡时导航工作正常。但是，当您单击另一个选项卡时，导航不再起作用。
在包含的数据库表单脚本上放置 echo 语句后，我注意到在您选择新选项卡后，导航按钮不再使用导航按钮调用 php 数据库脚本。它似乎停留在表单的“页面加载”版本上。
长解释，有什么想法吗？
1. Index.html page (Jquery Tabs)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Some Title</title>
<link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" href="css/mainstyle.css" />
<link rel="stylesheet" href="css/newstyle.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.custom.js"></script>
<script src="js/cookie.js"></script>
<script>
$(function() {
var index = 'key';
var dataStore = window.sessionStorage;
try {
var oldIndex = dataStore.getItem(index);
} catch(e) {
var oldIndex = 0;
}
$('#tabs').tabs({
active : oldIndex,
activate : function( event, ui ){
var newIndex = ui.newTab.parent().children().index(ui.newTab);
dataStore.setItem( index, newIndex )
}
});
});
</script>
</head>
<body>
<div id="top"><img id="headimg" src="css/images/header.gif" alt="heading"/></div>
<div id="middle">
<div id="tabs">
<ul>
<li><a href="#tabs-1" class="button">Site Home</a></li>
<li><a href="php/page1.php" class="button">First Tab</a></li>
<li><a href="php/page2.php" class="button">Second Tab</a></li>
<li><a href="php/page3.php" class="button">Third Tab</a></li>
<li><a href="php/page4.php" class="button">Forth Tab</a></li>
<li><a href="php/page5.php" class="button">Fifth Tab</a></li>
</ul>
<div id="tabs-1" class="content">
</div>
</div>
</div>
<div id="footer" class="smaller">
</div>
</body>
</html>
2. page1.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" href="css/newstyle.css" />
<script src="js/jquery-ui-1.10.2.custom.js"></script>
</head>
<script>
$(document).ready(function() {
$(".prev span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{pn:id},function(data){$("#dbform").html(data);});});
$(".next span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{nn:id},function(data){$("#dbform").html(data);});});
$(".first span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{fn:id},function(data){$("#dbform").html(data);});});
$(".last span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{ln:id},function(data){$("#dbform").html(data);});});
});
</script>
<body>
<div id="alerts_main" class="content">
<div id="dbform">
Original
<?php include 'aec_database.php'; ?>
</div>
</div>
</body>
</html>
3. aec_database.php
<?php
include("conf.php");
if(isset($_POST['pn'])){$prev = $_POST["pn"];}
if(isset($_POST['nn'])){$next = $_POST["nn"];}
if(isset($_POST['ln'])){$last = $_POST["ln"];}
if(isset($_POST['fn'])){$first = $_POST["fn"];}
$firstvalue = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID ASC LIMIT 1");
while($row = mysqli_fetch_array($firstvalue))
{
$fvalue = $row['System_ID'];
}
$lastvalue = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID DESC LIMIT 1");
while($row = mysqli_fetch_array($lastvalue))
{
$lvalue = $row['System_ID'];
}
if ($prev == $fvalue){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$prev'");
}
elseif($next == $lvalue){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$next'");
}
elseif(isset($prev)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID < '$prev' ORDER by System_ID DESC LIMIT 1");
}
elseif(isset($next)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID > '$next' ORDER by System_ID ASC LIMIT 1");
}
elseif(isset($first)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$fvalue'");
}
elseif(isset($last)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$lvalue'");
}
else{
$result = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID ASC LIMIT 1");
}
while($row = mysqli_fetch_array($result))
{
$si = $row['System_ID'];
$ai = $row['Additional_Information'];
}
echo "
<form>
<div id='sites_sec2' class='sites_sec_class'>
<div id='a2' class='sites_sub_sec_class'>
<div class='field'>
<label for='contactid'>System ID:</label>
<div class='field-subject'><input type='text' name='contactid' value='".$si."' /></div>
</div>
<div class='field'>
<label for='ai'>Add Info:</label>
<div class='field-subject'><input type='text' name='ai' value='".$ai."' /></div>
</div>
</div>
</div>
<div id='hrsep'><hr></div>
<div id='buttons'>
<div class='first'><span><a href='#'><img src='css/images/icons/leftend.png' /></a></span></div>
<div class='prev'><span><a href='#'><img src='css/images/icons/leftarrow.png' /></a></span></div>
<div class='next'><span><a href='#'><img src='css/images/icons/rightarrow.png' /></a></span></div>
<div class='last'><span><a href='#'><img src='css/images/icons/rightend.png' /></a></span></div>
</div>
</form>";
?>
4. conf file
<?php
global $mysqli;
//server info
//server info
$server = 'localhost';
$user = 'xx';
$pass = 'xx';
$db = 'xx';
//connect to db
$con = mysqli_connect($server, $user, $pass, $db);
//mysqli_query('SET NAMES UTF8;');
//mysqli_query('SET COLLATION_CONNECTION=utf8_general_ci;');
//mysqli_client_encoding($con);// where $conn is your connection
if(mysqli_connect_errno()){
printf("Connect failed: %s\n", mysqli_connect_error());
}
//show errors
mysqli_report(MYSQLI_REPORT_ERROR);
?>