jQuery UI - 页面加载样式延迟

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 元素，然后:

$(函数() { $('#tabs').show(); $('#tabs').tabs(); });