2013-02-26 104 views
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'

回答

0

對於標籤1的響應觸發了relo jQuery和JQuery UI的廣告肯定沒有幫助。

從響應中刪除這些腳本引用。

&嘗試使用console.log而不是alert。

+0

感謝您的快速響應,但警報與它無關。 – 2013-02-26 19:30:32

+0

警報提示只是爲了讓您的工作流程更容易一些。我的答案是關於重新加載jQuery和jQuery UI。 此外,在您的回覆中返回的頁面還有另一個調用來重新加載您所需的內容。爲什麼不只是第一次返回內容? – Mattyod 2013-02-26 19:33:25