切换标签时Jquery闪烁答案

【问题标题】：Jquery Blink when switching tabs切换标签时Jquery闪烁
【发布时间】：2013-02-12 09:28:36
【问题描述】：

我不知道问题出在 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'

【问题讨论】：

标签： javascript jquery jquery-ui-tabs jquery-tabs

【解决方案1】：

第一个选项卡的响应触发了 jQuery 和 Jquery UI 的重新加载，这当然没有帮助。

从响应中删除那些脚本引用。

& 尝试使用 console.log 代替 alert。

【讨论】：

感谢您的快速响应，但警报与此无关。
警报建议只是为了让您的工作流程更轻松一些。我的回答是关于重新加载 jQuery 和 jQuery UI。此外，您响应中返回的页面还会再次调用以重新加载您想要的内容。为什么不第一次返回内容？