Jquery切换选项卡时闪烁

Jquery Blink when switching tabs

本文关键字：闪烁 选项 Jquery      更新时间：2023-09-26

我不知道问题是jquery的加载函数还是jquery的选项卡(或者没有(，但我的问题是，当在tab2到tab1之间切换时(见下面的代码(，选项卡内容会被清除，然后再次加载，这会导致闪烁。数据通过load函数动态加载到tab1(id:The_paraggraph(中的段落元素。当从tab1切换到tab2时，问题不会发生。

复制：转到http://mumka12345.appspot.com/，将鼠标悬停到选项卡2，然后返回到选项卡1。我已经发布了两个警报来强调这个问题。

这是我的主页，有两个标签

<!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">

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

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

&请尝试使用console.log而不是alert。

相关文章：