[英]automatically load ajax loaded content (jquery ui tabs)
I'm using jQuery UI Tabs to load some content via Ajax when the user clicks on the tabs. 当用户点击标签时,我正在使用jQuery UI标签通过Ajax加载一些内容。 What I want is to load the content of the first tab automatically when the page loads without the user having to click on the tab. 我想要的是在页面加载时自动加载第一个选项卡的内容,而无需用户点击选项卡。 How do I achieve this? 我该如何实现这一目标?
Thank you 谢谢
Just call the tab load method for the first tab (0) on page load: 只需在页面加载时调用第一个选项卡(0)的选项卡加载方法:
$( function() {
$( "#tabs" ).tabs( "load" , 0 );
}
This just loads the content. 这只是加载内容。 If you want to select a tab, use select
, which also loads the content. 如果要选择选项卡,请使用select
,它也会加载内容。 This shouldn't be needed if you are loading the default tab: 如果要加载默认选项卡,则不需要这样做:
$( function() {
$( "#tabs" ).tabs( "select" , tabIndex );
}
Edit: For newer versions of jQuery, you need to use the active
option: 编辑:对于较新版本的jQuery,您需要使用active
选项:
$( function() {
$( "#tabs" ).tabs( "option", "active", tabIndex );
}
Demo: http://jsfiddle.net/jtbowden/8zkfrbee 演示: http : //jsfiddle.net/jtbowden/8zkfrbee
$(document).ready(function(){
$( "#tabs" ).tabs( "load" , 0 );
});
If you want you can also keep the content pre-loaded inside the first div that has an id="tabs-1"
but if you use pre-loaded approach then you don't need to use a url in your first <a>
inside <li>
instead use 如果你想要你也可以保持内容预先加载到id="tabs-1"
的第一个div中,但是如果你使用预加载的方法,那么你不需要在你的第一个<a>
使用url在里面<li>
代替使用
<li><a href="#tabs-1">First tab</a><li>
It looks like you can include elements within the top tag element to populate the tabs if you don't want to use ajax. 如果您不想使用ajax,看起来您可以在top标签元素中包含元素以填充选项卡。 The ID of the element containing the text just needs to match the anchor tag for the tab. 包含文本的元素的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.