I'm having trouble trying to get this functionality to work. I would like to load a tab automatically when the page loads. I have used the following code.
$tabs.tabs('select', 0);
However, what's happening is that it's only selecting it and not loading it (that tab loads via ajax). Interestingly when I select another tab and then go back to the 1st tab again then it loads fine.
I just answer to this question to avoid people to misguide with deprecate functions.
Most of the answers were correct at the time of the question, but most of them were not using in new API.
try following code If you are using new API.
$(function() {
$( "#tabs" ).tabs();
$( "#tabs" ).tabs( "option", "active", 2 );
});
For more details check following link.
http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method
Have you tried specifying the selected tab at the time of initialization:
var $tabs = $('.selector').tabs({ selected: 0 });
After initialization, you can do this to programmatically select a tab:
$tabs.tabs('option', 'selected', 0);
EDIT: This works perfectly for me:
var $tabs = jQuery("#tabDiv > ul").tabs( { selected: null } );
$tabs.tabs("select", 0);
I had the same problem before. The solution I had was calling tabs() two times; once without parameters; once with the select option:
Eg.
$("#tabs").tabs();
$("#tabs").tabs('select', 2);
If nothing works, here's a little trick:
You can use adding and removing CSS classes from jquery like below:
// Firstly, remove the "active" class from div panel and <li> tag
$('#firstTab, #firstTabDiv').removeClass('active');
Also, remove the "in" class from div tag in which your panel resides
$('#firstTabDiv').removeClass('in');
Then add same class which you removed in the div and panel in which you want
to get automatically select
$("#thirdTab, #thirdTabDiv").addClass('active');
$("#thirdTabDiv").addClass('in');
<li id='firstTab' class="active">
<a href="#firstTabDiv" data-toggle="tab">
First Tab
</a>
</li>
<li id='secondTab' class="active">
<a href="#secondTabDiv" data-toggle="tab">
Second Tab
</a>
</li>
<li id='thirdTab' class="active">
<a href="#thirdTabDiv" data-toggle="tab">
Third Tab
</a>
</li>
This way you will be able to automatically show a tab onload.
Don't forget to put it inside of a $(document).ready(function(){;}); construct.
I'm sure that's not the cause of your problem, but it can't hurt to make sure your jQuery isn't firing until everything is set up to handle it.
You should be able to call:
$tabs.tabs('load', 0);
after you select it to load its data.
Assuming you were using the demo from the Jquery tabs page (http://jqueryui.com/tabs/#default). You can easily select the tab by clicking on the anchor. Just find the anchor tag based on its tab name like so...
$('a[href=#tabs-1]').click(); //selects the first tab
