CSS 在页面呈现后生效

Question

我在加载页面时遇到了这个问题，然后在几分之一秒后发生了 CSS 效果或样式。

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

当页面呈现时，选项卡在另一个下方显示一秒钟，如下所示:

One TwoThree

然后正确呈现为标签

有没有快速简便的方法来解决这个问题。谢谢

Answer 1

这不是样式；它是 jQuery UI javascript 库，它将必要的 html 附加到您的页面，以便选项卡看起来非常相似。

您有几个选择。首先，您可以隐藏选项卡并在 jQuery UI 完成其魔法后显示它们。其次，您可以设置选项卡的样式，使它们看起来与完成的输出足够接近，这样更改就不会太明显。第三，您可以放弃 jQuery UI 并仅使用 CSS 设置选项卡样式。我会说所有有效的方法。

希望这对您有所帮助!

编辑:

对于第一个选项，假设这是包含选项卡的 div:

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

在您的样式表中，隐藏#tabs:

#tabs {
    display:none;
}

然后，像这样修改您的 jQuery UI 调用:

var t = $("#tabs");

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