Question

我有这个页面：http://www.shopdesertridge.com/events/full-calendar/

如果您正在加载它，您会注意到一段时间“May”标签在页面加载时为蓝色并且正确的样式（js方法）被称为 AFTER 页面内容已加载。

你知道任何提前制作这种UI样式的技巧吗？

对于asp.net程序员：TAB是具有特定月份的转发器，所以我甚至尝试在ItemDataBound时调用js方法，但结果与在文档准备好时调用它时相同...

用于呈现标签'UI：

的js

function tabsUi(){
    $("#tabs").tabs();
};

Answer 1

让样式更快地应用的最有效方法是直接在标记中包含所需的类。

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   </ul>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

这样一旦加载了css，内容就会被设置样式，而不是等待DOMReady事件。

Answer 2

您可以默认尝试display:none，然后tabs()，然后show()

<div id="tabs" style="display:none">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">1</div>
    <div id="tabs-2">2</div>
    <div id="tabs-3">3</div>
</div>

<script>
    $(function()
    {
        $( "#tabs" ).tabs();
        $( "#tabs" ).show();
    });
</script>

之前为jQuery选项卡应用UI？

2 个答案: