JQuery Blink при переключении вкладок

Я не знаю, связана ли проблема с загрузкой jquery или с вкладками jquery (или ни с одним из них), но моя проблема заключается в том, что при переключении между tab2 на tab1 (см. Код ниже) содержимое вкладки очищается, а затем снова загружается, что вызывает мигание. Данные загружаются динамически в элемент абзаца в tab1 (id: the_paragraph) через функцию загрузки. проблема не возникает при переключении с tab1 на tab2.JQuery Blink при переключении вкладок

Воспроизвести: перейти к 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>

сервер возвращает строку «Hello TAB2», когда клиент reques 'tab2' сервер возвращает строку «Dynamic Fill», когда клиент запрашивает «fillParagraph»

источник

2013-02-26 omer bach

Ответ на вкладку один вызывает relo объявление jQuery и пользовательского интерфейса JQuery, который, безусловно, не помогает.

Удалить эти ссылки сценариев из ответа.

& попробуйте использовать console.log вместо предупреждения.

источник

2013-02-26 19:28:40 Mattyod

Спасибо за быстрый ответ, но предупреждения не имеют к этому никакого отношения. –

предложение о предупреждениях было просто для облегчения вашей работы. Мой ответ касался перезагрузки jQuery & jQuery UI. Также страница, возвращенная в вашем ответе, делает еще один звонок, чтобы перезагрузить контент, который вы хотите. Почему бы просто не вернуть контент в первый раз? – Mattyod

JQuery Blink при переключении вкладок

ответ

Смежные вопросы