0

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

如果您正在加载它，您会注意到一段时间“May”选项卡在页面加载时是蓝色的，并且在加载页面内容之后调用了正确的样式（js 方法）。

你知道任何让这个 UI 样式更早的技巧吗？

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

用于呈现选项卡 UI 的 js：

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

2 回答 2

2

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

<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 事件。

于 2012-04-30T20:37:41.480 回答
1

你可以试试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>​
于 2012-04-30T20:39:27.017 回答