页面加载时 jQuery 选项卡闪烁 (FOUC)答案

【问题标题】：jQuery tabs flash (FOUC) when page loads页面加载时 jQuery 选项卡闪烁 (FOUC)
【发布时间】：2013-01-07 01:56:43
【问题描述】：

我有以下网站：

http://cassidoo.public.iastate.edu/

我正在为我的菜单使用 JQuery UI 选项卡。加载页面时，选项卡中的内容会闪烁。

我已经尝试了从ui-tabs-hide 技巧到在 Javascript 中隐藏东西的所有方法。有没有我错过的技巧？我该怎么办？

感谢您的帮助！

【问题讨论】：

我认为您应该在文档就绪状态下调用 tabcontrol.js 中的内容。
在带有 css（不是 js）的标签上尝试 z index = -1 - 看看它是否有效

标签： javascript jquery jquery-ui jquery-ui-tabs jquery-tabs

【解决方案1】：

我遇到了类似的情况，我是这样解决这个问题的：

(1.) 定义一个名为“hide”的css类并将其设置为“display:none”

(2.) 在每个具有“contentpanel”类的 div 中，在旁边添加“hide” 它在你的标记中。这将确保页面加载显示
没有，而不是等待 javascript 来处理它。

(3.) 创建 jquery.ui.tabs 选择器时，使用 “tabscreate”方法从您的内容中删除“隐藏”类面板。所以你的选择器看起来像这样：

  //define tabs instance 
   $( "#tabs" ).tabs({

        create: function( event, ui ) {
           //when tabs are created, remove your class .hide from each content panel
           //so jquery tabs will control when panel content will surface
           $(your contentpanel selector).removeClass(hide);
        }
     //whatever else you need to do
     ....
     ...
     ..
    });

要了解有关 jQuery UI 选项卡内部方法的更多信息，请阅读以下内容：

http://api.jqueryui.com/tabs/

阅读

创建（事件，用户界面）

希望这会有所帮助。

克里斯

【讨论】：