我不知道问题出在 jquery 的加载功能还是 jquery 的选项卡(或没有),但我的问题是在 tab2 到 tab1 之间切换时(见下面的代码)选项卡内容被清除然后再次加载,这会导致眨。数据通过 load 函数动态加载到 tab1 (id : the_paragraph) 中的段落元素。从tab1切换到tab2时不会出现问题。
要重现:转到http://mumka12345.appspot.com/,将鼠标悬停到 tab2,然后回到 tab1。我已经放置了 2 个警报来强调这个问题。
这是我的主页,有 2 个标签
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script>
$(document).ready(function()
{
$("#tabs").tabs({
load: function(event, ui)
{
$(ui.panel).delegate('a', 'click', function(event)
{
$(ui.panel).load(this.href);
event.preventDefault();
});
},
event: "mouseover"
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li><a href="/tab1"><span>tab1</span></a></li>
<li><a href="/tab2"><span>tab2</span></a></li>
</ul>
</div>
</body>
</html>
服务器在请求“tab1”时返回以下内容:
<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script>
$(function()
{
alert('ready');
$("#the_paragraph").load("/fillParagraph" , function()
{
alert('paragraph loaded');
});
});
</script>
</head>'
<body">
<div id="container">
<p id="the_paragraph">
</p>
</body>
</html>
当客户端请求“tab2”时,服务器返回字符串“Hello Tab2” 当客户端请求“fillParagraph”时,服务器返回字符串“Dynamic Fill”