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 );
});

如果你想要，你也可以将内容预先加载到具有id="tabs-1"的第一个div中，但是如果你使用预加载的方法，那么你不需要在你的第一个{{{ 1}}在<a>内使用

<li>

Answer 3

如果您不想使用ajax，看起来您可以在top标签元素中包含元素以填充选项卡。包含文本的元素的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>

自动加载ajax加载的内容（jquery ui tabs）

3 个答案: