Question

I’m using jQuery UI Tabs to load some content via Ajax when the user clicks on the tabs. 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

Answer 1

Just call the tab load method for the first tab (0) on page load:

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

This just loads the content. If you want to select a tab, use select, which also loads the content. 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:

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

Demo: http://jsfiddle.net/jtbowden/8zkfrbee