Php 如何在动态生成的jQuery UI选项卡上避免FOUC

我使用jQUery UI选项卡动态创建多个选项卡——这些选项卡是使用视图页面上的

foreach

创建的，如下所示（一些codeigniter标记）：

$（函数（$）{
$（'#plants'）.tabs（'paging'，{follow:true}）；
});


等

如上所述，凸耳成形良好。问题是未格式化内容的好的ol'Flash。它发生在IE、Chrome、FF上

我在jQuery文档中尝试了CSS选项，但没有成功

有一个简单的JS，它在

上插入CSS样式，然后在特定的

id

上应用

{display:none}

——但这会使我的面板消失，等待用户交互。我需要第一个面板在加载时对用户可见，以及顶部的其他选项卡——没有该死的FOUC

有人知道如何在jQueryUI选项卡上明确解析FOUC吗？它看起来真的不太好，如果我不能解决这个问题，我可能不得不完全放弃标签

非常感谢任何指点/路线图

建议：

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

…在初始化选项卡之前防止FOUC（未设置样式的内容的闪烁）
添加必要的类以立即将非活动选项卡面板隐藏到HTML中-请注意，禁用JavaScript不会使其正常降级：
...
...

---

不确定您是否尝试过此操作，或者它是否确实相关。

我发现在head标记中准备好的文档中启动tabs（）函数可以防止选项卡的非样式闪烁

$(document).ready(function() {

    //fire off the tabs
    $(function() {
        $( "#tabs" ).tabs();
    });

});

我用于通过ajax显示选项卡的另一种方法是ajax请求，该请求通过jquery.tmpl写入选项卡。

在DOM准备就绪之前隐藏整个页面（

元素），然后在DOM准备就绪后再次使html元素可见：

$('html').css('visibility','hidden');
$(function() {
    $('html').css('visibility','visible');
    $('#tabs').tabs();
});

---

这是因为

html

元素在

head

中遇到此javascript时，在任何其他DOM元素（如

body

）之前可用可用。

您有在线演示吗？请查看我的答案，了解一个很好的方法。谢谢，但我尝试了，结果没有什么不同--我想知道是否有办法通过ajax按需加载其他选项卡-有什么想法吗？有趣的是，这让事情变得更糟，使用document.ready指令时，flash实际上需要更长的时间——在页面中放置较高和较低位置时都会发生这种情况——是否有指向您提到的ajax库的链接？在术语或脚本中还加载了什么？我只是在使用jquery ajax请求。。。Jquery模板写入选项卡，然后我启动选项卡。。。这都是jquery…谢谢，我来看看如何使用jqajax——你有没有关于如何实现它的文档/tut的链接？或者您所做的只是使用上面提到的代码？您有两个嵌套的

document.ready（）

，因为

$（）

是

$（document.ready（）

的快捷方式。

$('html').css('visibility','hidden');
$(function() {
    $('html').css('visibility','visible');
    $('#tabs').tabs();
});