CODEWITHSUNDEEP
jquery-uijquery-ui-tabs
yety
yety

Reputation: 711

How set default opened JQuery UI tab another than first

I have big web application using JQuery UI Tabs. In central JS file I have setted all tabs.

Using

$("#tabs").tabs;

But on one page I need to have selected another tab than first.

If I use

$("#tabs").{ selected: add });

(name of tab is #add)

Its not running, probably because Tabs are already set up.

Does anyone know how to set opened another than first tab (in default state - after loading page) if tabs are already turned on?

I hope, you will understand, my English is pretty terrible.

Upvotes: 4

Views: 18175

Answers (3)

Tiquelou
Tiquelou

Reputation: 459

I know this one's old, but I noticed an error in the code you have written: 

$("#tabs").{ selected: add });

This should be

$("#tabs").tabs({ selected: add });

Also, selected option is deprecated as of jquery ui 1.9 as indicated here. Recommended is the active option, details here

In any case, use the index of the tab you want to open, not the href value; i.e. if you want to open the 3rd tab use

$("#tabs").tabs({ selected: 2 });

or

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

check this fiddle

Upvotes: 9

Andrew Whitaker
Andrew Whitaker

Reputation: 126082

Use:

$("#tabs").tabs("select", index)

Where index is the zero-based index of the tab you want to select, or a selector designating the tab you want to open. So in your case:

$("#tabs").tabs("select", "#add");

Upvotes: 5

Eugene M
Eugene M

Reputation: 1307

Resurrecting an old question, but I couldn't get the example from Andrew to work.

Instead what worked for me, thanks to Rionmonster's second example here was:

var index = $('#tabs li a').index($('a[href="#add"]').get(0));
$('#tabs').tabs({selected: index});

You have to pass the zero-based index as the "selected" option when calling tabs(). The first line of the code above gets the zero-based index of the tab for "#add" if you don't know it already.

Upvotes: 8

Related Questions