自动加载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>