CSS在页面呈现后生效 [英] CSS takes effect after page has rendered

问题描述

我遇到这个问题，我的网页加载，然后一秒钟的CSS效果或造型发生后。

我遇到的主要问题是使用我使用的JQuery选项卡
http://docs.jquery.com / UI / Tabs＃source

当页面呈现时，标签显示一个在另一个之下，如下：

 
一
二
三
 

正确显示为标签

有一个快速和简单的方法来解决这个问题。
感谢

解决方案

它是jQuery UI的javascript库，它是附加必要的html到您的页面，使标签可以看起来所有漂亮的。

你有几个选项。首先，您可以隐藏标签页，并在jQuery UI完成其魔术后显示它们。其次，您可以对选项卡进行样式设置，以使它们看起来足够接近已完成的输出，以使更改不那么明显。第三，你可以删除jQuery UI和样式的标签与CSS只。所有有效的方法，我会说。

希望这有助于！

编辑：

对于第一个选项，让我们假设这是包含选项卡的div：

  < div id =tabs> 
 ... stuff ... 
< / div> 
  

在样式表中，隐藏#tabs：

  #tabs {
 display：none;然后，修改您的jQuery UI调用，如下所示：
 
 
 
 $ b 
 $ b 
  var t = $（＃tabs）; 
 
 t.tabs（{
 create：function（）{
 t.show（）; 
} 
}）; 
  
 
I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.

The main issue I am seeing is with the JQuery tabs that I am using
http://docs.jquery.com/UI/Tabs#source

When the page renders, the tabs show one below the other for a second like this:
One 
Two
Three
and then render properly as tabs

Is there a quick and easy way to fix this.
Thanks
解决方案
It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.

You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.

Hope this helps!

EDIT:

For the first option, let's say that this is your div containing the tabs:
<div id="tabs">
  ...stuff...
</div>
In your stylesheet, hide #tabs:
#tabs {
    display:none;
}
Then, modify your jQuery UI call like so:
var t = $("#tabs");

t.tabs({
    create:function(){
        t.show();
    }
});


                        
这篇关于CSS在页面呈现后生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！