Jquery选项卡，未经格式化的列表在Firefox中重新加载jQuery HTML后闪烁

我正在使用最新的jQuery选项卡，我的所有选项卡（以及它们上面的其他内容）都在包含Div。其中一个选项卡中有一个表单，当提交表单时，它将通过AJAX进行处理，然后返回的HTML将替换整个包含的Div。此返回的HTML再次包含选项卡。

替换HTML后，我将jQueryfunction重新绑定到列表：

 $（'＃tabs'）。tabs（{fx：{opacity：'toggle'}}）;

读完其他问题后，我在UL上使用class="ui-tabs" class="ui-tabs-hide" ，在LI上使用class="ui-tabs-hide" ，在格式化之前隐藏所有内容。

在IE8和Chrome中这很好用。但是在Firefox中，未格式化的列表在HTML刷新和正在格式化的选项卡之间进行了简要显示（在第一次加载时它也非常简短）。

有什么想法可以避免这个吗？

来自jQueryUI文档：

…在标签初始化之前阻止FOUC（无格式内容的Flash）

添加必要的类以立即将非活动选项卡面板隐藏到HTML – 请注意>在禁用JavaScript时，这不会优雅地降级：

class="ui-tabs-hide"应该放在每个面板上，而不是选项卡列表项。

这不一定会使列表没有问题; 如果您正确地实现上述操作并仍然获得FOUC，则应该隐藏列表的父元素，直到您加载新内容并列出列表为止。您可以使用$（）。hide（）和.show（）方法来执行此操作。

我只是遇到了类似的问题，我发现另一个解决方案导航工作的解决方案是将“ui-tabs-nav”类添加到选项卡导航中的

标签中，（即

），如下所示：

   Menu item A 
 Menu item B.
 Menu item C
 Menu item D

当脚本触发时，Jquery选项卡脚本会自动将“ui-tabs-nav”类添加到

，但是通过手动将其放入html中，即使在那里，也会插入选项卡菜单的相关css是正在加载的选项卡脚本的延迟。希望这可以帮助！

HeyPops使用visibility属性的变体，但在CSS样式表中：利用.tabs()初始化后添加的类，例如.ui-tabs类。示例CSS：

 .tab-this { visibility: hidden; } .tab-this.ui-tabs { visibility: visible; }

然后只需将该类（ tab-this ）添加到您选项卡中的div，以及整个站点中的任何其他选项卡式内容。

这似乎并不总是有效。我建议使用Kelso.b答案而不是jQuery docs解决方案。这是一个例子。

 /* to hide flash styles on tabs pages - in this example customtabs is the parent element */ .customtabs { display: none; }

然后在jQuery选项卡中添加show方法。

 $(function() { $( "#tabs" ).tabs({ }); $( ".customtabs" ).css("display","inline"); });

这种解决方法从我看到的更清晰，因为它也阻止了UL的出现。将style =“visibility：hidden”添加到包含UL和所有选项卡窗格的DIV中，如下所示：

   Tab 1
 Tab 2
 Tab 3

然后当你选择DIV时，在格式化之后使其可见，例如：

 $('#tabs').tabs({ options }).css('visibility','visible');

使用visibility：hidden而不是display：none表示选项卡DIV中的所有元素都具有大小和位置，而display：none则不然。