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

Question

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

替换HTML后,我将jQuery功能重新绑定到列表:

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

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

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

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

Answer 1

来自jQueryUI文档:

...在标签初始化之前阻止FOUC(无格式内容的Flash)

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

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

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

</div>

本class="ui-tabs-hide"应该去每个面板,而不是选项卡列表中的项目上.

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

Answer 2

我只是遇到了类似的问题,我发现另一个解决方案导航工作的解决方案是将"ui-tabs-nav"类<ul>添加到选项卡nav中的标签(即<ul class = "ui-tabs-nav">),如下所示:

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

<ul class = "ui-tabs-nav">
    <li><a href="x.html" title="ajax_content">Menu item A </a></li>
    <li><a href="x.html" title="ajax_content">Menu item B.</a></li>
    <li><a href="x.html" title="ajax_content">Menu item C</a></li>
    <li><a href="x.html" title="ajax_content">Menu item D</a></li>  

</ul>

<ul>当脚本触发时,Jquery选项卡脚本会自动添加"ui-tabs-nav"类,但是通过手动将其放入html中,即使存在延迟,也会插入选项卡菜单的相关css在正在加载的选项卡脚本中.希望这可以帮助!

Answer 3

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

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

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