Lee McAlilly
Lee McAlilly

Reputation: 9314

How to set a default tab with Jquery UI

I'm using Jquery and Jquery UI with the following:

$(document).ready(function() {
    $('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});

Right now it automatically sets the first tabs as the default tab that is selected when the document loads. How do I override this and make the second tab the default selected tab when the page loads?

Upvotes: 13

Views: 44633

Answers (3)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102448

If you happen to be using jQuery UI >= 1.9, this is how it works:

$(".selector" ).tabs({ active: 2 });

More details on the Tabs Widget API page: http://api.jqueryui.com/tabs/#option-active

Upvotes: 26

Mark Hurd
Mark Hurd

Reputation: 13096

$('#tabvanilla > ul').tabs({ selected: 1 });

More details on the specifications page.

Upvotes: 39

Elemental
Elemental

Reputation: 7521

I found this alternate solution which might be preferable in some situations: http://www.markhneedham.com/blog/2010/09/08/jquery-ui-tabs-changing-selected-tab/

Upvotes: 2

Related Questions