早些時候爲jQuery標籤應用UI？

Question

我有這個頁面：http://www.shopdesertridge.com/events/full-calendar/

如果您加載它，你會一會發現，「五一」選項卡是藍色，而頁面加載和適當的風格（JS方法）被稱爲AFTER頁面的內容被加載。

你知道有什麼技巧可以讓這個UI風格更早嗎？

對於asp.net程序員：該選項卡是使用專用箇中繼器，所以我甚至嘗試調用JS方法時ItemDataBound但結果是一樣的文件準備打電話時，它喜歡...

的JS來渲染製表符的UI：

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>​