Jquery Tab link to another tab from content within a tab

Question

I'm using the JQuery tabs plugin.

I'd like to link content within tab 1 to take me to tab 3 instead of having to click Tab 3 to get to it. How do I do this?

@redsquare... So, i modified it based on your suggestion that way I can make all the tabs interact with each other. This change works, thanks again, so I guess I'm wondering if there's a nicer way of writing this or is this the best way?

Demo with latest changes: http://jsbin.com/etoku3/

<script type="text/javascript"> 
    $(document).ready(function() {
        var $tabs = $("#container-1").tabs();
          $('a.tab1').click(function(){$tabs.tabs('select', 0);});
          $('a.tab2').click(function(){$tabs.tabs('select', 1);});
          $('a.tab3').click(function(){$tabs.tabs('select', 2);});
          $('a.tab4').click(function(){$tabs.tabs('select', 3);});
          $('a.tab5').click(function(){$tabs.tabs('select', 4);});
    });
</script>

Answer 1

You need the Tabs select method

e.g

$('#anchor').click( function(){

  $('#tabs').tabs( "select" , 2 )

});

Demo using your markup here

Answer 2

If the links are going to be a common occurrence, following design could be used:

<script lang="text/javascript">
$('.tablink').live( 'click', function(){
  $('#container-1').tabs('select', $(this).attr('rel'));
});
</script>

And in the body have following links:

<span class="tablink" rel="2">Link to tab 2</span>

or

<a href="" class="tablink" rel="2">Link to tab 2</a>

Answer 3

A semantic solution:

$(document).ready(function() {
$('a.directTab').click( function(){
    var tabWanted = $(this).attr('rel').split('-')[1];
    $('#container-1').tabs( "select" , tabWanted);
    });
});

If you have a problem with the "click" alone event, you can use "live".

For the link, you replace the "rel" attribute by the tab wanted:

<a class="directTab" rel="fragment-3">want this text</a> to link to tab 3 

Otherwise try this Obtrusive code:

<a onclick="$('#container-1').tabs('select', 2);">want this text</a> to link to tab 3