【发布时间】：2013-09-23 20:51:58
【问题描述】：
我有几个选项卡，每次我选择一个选项卡时，都会提交表单，发送一个不同的值（对用户隐藏）。如果我说从 TAB1 到 TAB2，variable99 将获得 2 的值，TAB3 将获得 3 的值等等......我遇到的问题是当我选择 TAB2 时，我不希望页面恢复到 TAB1。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</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>
<style type="text/css">
</style>
<script>
$(function() {
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).submit();
});
});
</script>
</head>
<body>
<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>
<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>
<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form>
<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>
<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>
<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>
<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
</body>
</html>
这是我现在的代码，我删除了一些从那时起就没有的东西：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</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>
<style type="text/css">
</style>
<script>
$(function() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]
if (tabId == 'ui-id-1')
{
doAjax('1');
}
else if (tabId == 'ui-id-2')
{
doAjax('2');
}
else if (tabId == 'ui-id-3')
{
doAjax('3');
}
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
type: "POST",
url: "Tab_Click_v00.html",
data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</script>
</head>
<body>
<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>
<div id="Tab1">
<p>Tab1</p>
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>
</body>
</html>
这不起作用。它也杀死了css风格？？我会继续努力的。
【问题讨论】：
-
您介意编辑您的问题并告诉我们一些有关 Nb_var99 数据在到达
Tab_Click_v00.html时会发生什么情况吗？用户是否需要在那里做一些事情（也就是说，用户甚至需要查看该页面吗？），或者一旦数据（Nb_var99==3、Nb_var99==4 等）到达该 HTML 文件会发生什么?此外，您的服务器是否执行 PHP 或 ASP.NET 或？ （如果我们需要添加一些服务器端代码来完成答案？） -
另外，在将 Nb_var99 值发布到
Tab_Click_v00.html之后，您是否要更新当前页面 - 可能会显示成功消息，或者通过显示 Tab_Click 页面发回的数据（对于这个我们需要知道 PHP/ASP.NET 的问题...做起来超级简单，我们只需要知道。） -
您好，胡言乱语，Nb_var99 是一个包含在嵌入式网络服务器中的变量（这个网络服务器不这样做，或者至少我不知道它运行 PHP 或 ASP.NET）。据我所知，它运行一个名为 PINK 的软件（由 Netburner 开发）。不幸的是，将值加载到其变量的方法是在表单上执行 post。他们无需提醒用户此操作，另一个嵌入式单元将收集此信息作为参考，以了解用户当前所在的位置。
-
感谢您的见解 - 真的很有帮助。在这种情况下，我相信 AJAX 是要走的路。不需要
.done()函数（或者，在旧式AJAX 中，不需要success:函数）。只需使用 AJAX 发布数据，您应该是金子。 -
如果我使用表单 post 并且 url 是：Tab_Click_v00.html#tab1 并且我执行以下操作：
标签： javascript jquery html