Javascript Jquery在切换选项卡时闪烁_Javascript_Jquery_Jquery Ui Tabs_Jquery Tabs

Javascript Jquery在切换选项卡时闪烁

javascript jquery

Javascript Jquery在切换选项卡时闪烁,javascript,jquery,jquery-ui-tabs,jquery-tabs,Javascript,Jquery,Jquery Ui Tabs,Jquery Tabs,我不知道问题是在于jquery的load函数还是jquery的tab（或者没有），但我的问题是，当在tab2和tab1之间切换时（参见下面的代码），tab内容被清除，然后再次加载，这会导致闪烁。数据通过load函数动态加载到tab1中的段落元素（id:The_段落）。从tab1切换到tab2时，问题不会发生复制：转到，将鼠标悬停在tab2，然后返回到tab1。我已经发布了两个提醒来强调这个问题这是我的主页，有两个选项卡 <!DOCTYPE html> <html>

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

复制：转到，将鼠标悬停在tab2，然后返回到tab1。我已经发布了两个提醒来强调这个问题

这是我的主页，有两个选项卡

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


$（文档）.ready（函数（）
{
$（“#制表符”）。制表符({
加载：函数（事件、用户界面）
{
$（ui.panel）.delegate（'a'，'click'，函数（事件）
{
$（ui.panel）.load（this.href）；
event.preventDefault（）；
});
},
事件：“鼠标悬停”
});
});

服务器在请求“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>


$（函数（）
{
警报（“准备就绪”）；
$（“#段落”）.load（“/fill段落”，函数（）
{
警报（“段落加载”）；
});
});
'
选项卡1的响应会触发jQuery和jQuery UI的重新加载，这显然没有帮助
从响应中删除这些脚本引用
&尝试使用console.log而不是alert。
感谢您的快速响应，但是alerts与此无关。alerts建议只是为了让您的工作流程更轻松一些。我的回答是关于jQuery和jqueryui的重新加载。此外，您的响应中返回的页面会再次调用以重新加载您想要的内容。为什么不在第一次返回内容呢？