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>

redsquare · Accepted Answer · 2010-05-27 22:50:39Z

6

You need the Tabs select method

e.g

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

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

});

Demo using your markup here

answered May 27, 2010 at 22:50

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Evan Over a year ago

Very interesting! i updated my post to reflect what you suggested. I'm looking to really have all the tabs interact with each other from any tab not just a single tab.

Evan Over a year ago

by golly i think you got it! now that is some link tab swapping right there!

Evan Over a year ago

a second issue has cropped up, is there a way to make the tab also bring focus to the top of the page? See, in this example, jsbin.com/etoku3/11 when you scroll down and click a link, you'll notice the tab DOES switch, but it doesn't take you to the top of the page to see the TOP of the content.

musefan · Accepted Answer · 2012-02-01 17:35:27Z

1

$('#tabs').tabs({ selected: "#tabs-1" });

edited Feb 1, 2012 at 17:35

musefan

48.5k21 gold badges144 silver badges193 bronze badges

answered Feb 1, 2012 at 15:24

sreeni vas

111 bronze badge

Comments

azatoth · Accepted Answer · 2010-05-28 23:12:37Z

0

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>

answered May 28, 2010 at 23:12

azatoth

2,37915 silver badges18 bronze badges

2 Comments

redsquare Over a year ago

that will not work because the tabs widget stops the links from propagating to the body which is where live listens

Evan Over a year ago

also, in our cms, rel is not available for me to use within a link property.

Amirouche Douda · Accepted Answer · 2010-07-26 15:33:20Z

0

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

edited Jul 26, 2010 at 15:33

answered Jul 26, 2010 at 15:17

Amirouche Douda

1,5641 gold badge21 silver badges31 bronze badges

Comments

Stephen · Accepted Answer · 2012-02-06 09:47:37Z

0

$("#your button or what uou want to clivk").live('click',function()
    {

         $('#tabs').tabs({ selected: "#tabs-1" });
    });

in this code it's pointing to tab 1. You can use #tabs-2 or #tabs-3. which tab you want to open.

edited Feb 6, 2012 at 9:47

Stephen

1,7312 gold badges26 silver badges38 bronze badges

answered Feb 6, 2012 at 9:23

Sreeni Puthiyillam

4832 gold badges10 silver badges26 bronze badges

Collectives™ on Stack Overflow

Jquery Tab link to another tab from content within a tab

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related