Set active tab by clicking a link thats outside of the tabs?

Question

Im using the jQuery UI Tabs: http://api.jqueryui.com/tabs/

How can I make a link on my page thats outside of the tabs, when clicked make a certain tab active? Thanks

Answer 1

See http://api.jqueryui.com/tabs/#option-active

To get current active tab index:

var currentActive = $( ".selector" ).tabs( "option", "active" );

To set current active tab:

$( ".selector" ).tabs( "option", "active", <number of tab> );

For example:

$('a').click(function(){
         $( ".tabs" ).tabs( "option", "active", 2 );
});

Answer 2

In IE10 option 'active' not work. I use instead of 'active' option 'selected'.

$( ".selector" ).tabs( "option", "selected", <number of tab> );

Answer 3

Ive marked @Secator's answer as correct as I can see from the documentation hes right. However for some reason it didnt work for me so instead I 'manually' simulated a click on the tab:

        $("#myTrigger").click(function(e) {
              $("#id-of-normal-tab-link").click();
              e.preventDefault(); //prevent default behavior of the a#myTrigger 
        });

Answer 4

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

tabNumber starts with 0

Answer 5

Try this:

<li ....> 
     <a href="#tab-number">Tab Title</a>
</li> 

and them your url look like this: "[URL]#tab-number"

I hope help you.... Regards...