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

Question

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

替换 HTML 后，我将 jQuery 功能重新绑定(bind)到列表:

$('#tabs').tabs( { fx: { opacity: 'toggle' } } );

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

在 IE8 和 Chrome 中，此功能运行良好。然而，在 Firefox 中，未格式化的列表在 HTML 刷新和正在格式化的选项卡之间短暂显示(在第一次加载时也非常短暂)。

有什么办法可以避免这种情况吗？

Answer 1

来自jQueryUI docs :

...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that > this will not degrade gracefully with JavaScript being disabled:

<div id="example" class="ui-tabs">

<div id="a-tab-panel" class="ui-tabs-hide"> </div>

</div>

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

这不一定能修复未样式化的列表；如果您正确实现上述内容并且仍然获得 FOUC，则应该隐藏列表的父元素，直到加载新内容并对列表进行制表。您可以使用 $().hide() 和 .show() 方法来执行此操作。