Question

我正在使用jQuery UI标签小部件来设置我的页面样式：

<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>

    <div id="tab-1">
       ...
    </div>

    <div id="tab-2">
       ...
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('#tabs').tabs();
    });
</script>

我遇到的问题是当我第一次加载页面的时候，我看到在jquery tabs函数有机会运行之前页面没有设置样式。我的意思是不到一秒钟，我看到一个无序列表，其中包含标签1，标签2等的链接。

有没有办法摆脱这种延迟？我应该将这些类添加到我的标记中，jQuery UI最终会添加以便摆脱这个吗？

Answer 1

加载DOM，然后执行你的jQuery，这是你看到的第二个延迟。您可以将style="display: none"添加到tabs元素，然后：

$（function（）{ $（ '＃标签'）显示（）。 $（ '＃标签'）选项卡（）。 }）;

Answer 2

您可以默认隐藏标签，并在调用标签功能后显示它们，

HTML中的

：

<div id="tabs" style="visibility:hidden;">

在你的javascript代码中

 $(function() {
    $('#tabs').tabs().show();
});

jQuery UI - 页面加载的样式延迟

2 个答案: