0
我不知道是否問題是與jquery的加載函數或與jquery的選項卡(或沒有他們),但我的問題是,當切換tab2到tab1(見下面的代碼)標籤的內容是清除並再次加載,導致閃爍。數據通過加載函數動態加載到tab1(id:the_paragraph)中的段落元素。從tab1切換到tab2時不會發生此問題。Jquery轉換標籤時閃爍
若要重現: 請轉至http://mumka12345.appspot.com/,將鼠標懸停在tab2上,然後返回到tab1。我已經放置了兩條警報來強調這個問題。
這是一個有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」當客戶端當客戶端請求'fillParagraph'時,服務器返回字符串'Dynamic Fill'
感謝您的快速響應,但警報與它無關。 – 2013-02-26 19:30:32
警報提示只是爲了讓您的工作流程更容易一些。我的答案是關於重新加載jQuery和jQuery UI。 此外,在您的回覆中返回的頁面還有另一個調用來重新加載您所需的內容。爲什麼不只是第一次返回內容? – Mattyod 2013-02-26 19:33:25