Question

我在下面的菜单+ DIV组合中使用jQuery UI Tabs。第一个“DIV”（tc0）当前具有静态内容，但是，最后3个具有从3个PHP文件加载的动态内容（或AJAX）。

<div id="tabs"><!--Tabs-->

<ul class="grid_12 alpha" id="hmenu"> 
    <li><a href="#tc0">Link 1</a></li>
    <li><a href="example1.php">Link PHP 1</a></li>
    <li><a href="example2.php">Link PHP 2</a></li>
    <li><a href="example3.php">Link PHP 3</a></li>
</ul>

<div class="grid_12 alpha tcon" id="tc0">
    <h2 class="grid_12">Dashboard</h2>
</div>

</div><!--/Close Tabs-->

所有PHP文件都具有与id =“tc0”的div相同的结构。我刚刚省略了所有列出它们。 “tcon”类具有常规样式，不会影响不透明度或显示。 grid_12和alpha是960.gs的一部分。

我的jQuery如下：

<script type="text/javascript"><!--//TABS-->
    $(document).ready(function(){
        $("#tabs").tabs({ fx: { opacity: 'toggle' } })
    });
</script><!--//END TABS-->

问题如下：

从一个标签到另一个标签点击时，在显示新标签内容之前，会闪烁当前标签内容，然后完成不透明度。
之前，当我的所有标签都有“静态”内容时，不透明度工作正常，标签内容没有闪烁。现在，有了“php”内容，就有闪存。

我不相信这是一个FOUC（无格式内容的Flash）因为我的内容闪烁所有风格。问题是当前标签/内容在转换到下一个标签之前被重新显示。

如果我删除“fx：opacity”组合，它可以正常工作。

非常感谢任何想法。

jQuery UI选项卡+ AJAX内容Flash（不是FOUC）

0 个答案: