自動加載ajax加載內容（jquery ui標籤）

Question

我使用jQuery UI Tabs通過Ajax加載一些內容，當用戶點擊標籤。我想要的是當頁面加載時自動加載第一個選項卡的內容，而用戶不必點擊該選項卡。我如何實現這一目標？

謝謝

Answer 1

只要打電話給標籤加載方法在網頁加載時第一個選項卡（0）：

$(function() { 
    $("#tabs").tabs("load" , 0); 
} 

這只是加載內容。如果要選擇選項卡，請使用select，該選項也會加載內容。

$(function() { 
    $("#tabs").tabs("select" , tabIndex); 
} 

編輯：如果要加載默認的選項卡這應該沒有必要的jQuery的新版本，你需要使用active選項：

$(function() { 
    $("#tabs").tabs("option", "active", tabIndex); 
} 

演示： http://jsfiddle.net/jtbowden/8zkfrbee

Answer 2

$(document).ready(function(){ 
    $("#tabs").tabs("load" , 0); 
}); 

如果你想要的話你還可以保留內容pre-loa DED有一個id="tabs-1"第一個div內，但如果你使用預裝的方式，那麼你不需要在你的第一個<a>內<li>使用的URL，而不是使用

<li><a href="#tabs-1">First tab</a><li> 

Answer 3

看起來你可以包括內的元素如果您不想使用ajax，則頂部標記元素用於填充選項卡。包含文本的元素的ID只需要與選項卡的定位標記相匹配。

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

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Preloaded</a></li> 
     <li><a href="#tabs-2">Tab 1</a></li> 
     <li><a href="ajax/content2.html">Tab 2</a></li> 
     <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> 
     <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Hello, Tab One.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Hello, Tab Two.</p> 
    </div> 
</div>