记住您在哪个选项卡上（currentTab）。如果选择了一个选项卡，检查第一个选项卡是否正在离开；如果是，则发送带有当前信息的ajax请求预览 HTML;不需要成功处理程序，我们不需要任何客户端更改。如果显示下一个选项卡，请重置currentTab指数。在服务器端（php）你可以例如将数据保存到数据库，但不需要任何结果。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<link type="text/css" href="css/postingtabs.css" rel="stylesheet">
<link type="text/css" href="css/wmd.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript" src="js/wmd.js"></script>
<script type="text/javascript" src="js/showdown.js"></script>
<script type="text/javascript">
var currentTab = 0;
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
, select: function() {
if (currentTab == 0) {
$.ajax({
type: "POST",
url: "test1.php",
data: { "wmdVal": $("#wmd-preview").html() }
});
}
}
, show: function(event, ui) {
currentTab = ui.index;
}
});
$(".ui-tabs-panel").each(function(i) {
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1]);
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="tabs">
<ul>
<li><a href="#tab-1">1</a></li>
<li><a href="#tab-2">2</a></li>
</ul>
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"></div>
</div>
</div>
</body>
</html>
===更新===
如果您确实想暂时查看结果进行测试，请再次将成功处理程序添加到 ajax 参数中：
success: function(result) {
$('#wmd_result').html( $('#resultval', result).html());
}
并附加结果div再次到第一个选项卡的末尾：
<div id="wmd_result"></div>
