How to set default open jquery user interface tab different from first

Question

I have a great web application using jQuery UI tabs. In the central JS file, I set all the tabs.

Using

$("#tabs").tabs;

But on one page I need to select a different tab than the first.

If i use

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

(tab name: #add)

It does not work, perhaps because the tabs are already configured.

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

I hope you understand, my English is pretty terrible.

Answer 1

Resurrecting an old question, but I could not get an example from Andrew's work.

Instead of what worked for me, thanks to the second Rionmonster example here was:

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

When calling tabs() you need to pass the zero-based index as "selected." The first line of code above contains the zero tab index for "#add", if you don't already know this.

Answer 2

I know this old one, but I noticed an error in the code you wrote:

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

It should be

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

In addition, the selected option is deprecated as indicated in jquery ui 1.9, as indicated here . Recommended parameter active , details here

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

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

or

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

check this fiddle

Answer 3

Using:

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

Where index is the index of the null tab you want to select, or the selector denoting the tab you want to open. So in your case:

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