Opening a tab via a text link sounds trivial. But when tried, it’s actually not. I mean, it is an easy fix if you experienced it before but for someone who is still learning the ropes of jQuery and JavaScript in general, it’s quite frustrating.

But then again, the documentation of jQuery is fantastic. You just need to dig into the examples and you’ll find what you are looking for. So here’s the code from jQuery docs to select a tab from a text link instead of clicking a tab.


var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});

here’s the actual code the I used in my template.

$(document).ready(function(){
var $tabs = $(".ad_content").tabs();
$('.photolink').click(function() { // bind click event to link
$tabs.tabs('select', '#frm_ad_photos');
return false;
});
});

In this example, the class name of my tab is ad_content while the hidden tab (div) is named frm_ad_photos. I used #frm_ad_photos because I used id attribute so # is used as the pointer. The .photolink refers to all the links (<a href=”link here” class=”photolink” >) pointing to a specific tab. Yeah, you know that already but remember, I need to remind myself about it.

The solution is pretty simple but believe me, it took a while for me to get it working. A trivial mistake prevented me from doing it correctly. As always, I felt very stupid when I found out what my problem was.

Reference :
http://docs.jquery.com/UI/Tabs

4 Thoughts on “jQuery : Select A Tab via Text Link

  1. Thanks so much for posting this. I was having a hard time figuring this out…and it’s such a simple thing!!

    I made these notes for myself so I never forget. I’ll post them here just in case they are helpful for anyone else. The info is a little redundant, but very spelled out with specific explanations.

    *********
    Final code here…Full explanation below
    $(document).ready(function(){
    var $tabs = $(“#tabs”).tabs();

    $(‘.LinkClass’).click(function() {
    $tabs.tabs(‘select’, ’18’);
    return false;
    });
    });

    //EXPLANATION
    $(document).ready(function(){
    var $tabs = $(“#tabs” **This is the name of the div that all the tabs are in the HTML. Be sure to name it with a # if you are using a DIV ID….use a . if you are using a class**).tabs();

    $(‘.LinkClass’ **this is the name of the class associated with the tag used in the HTML**).click(function() {
    $tabs.tabs(‘select’, ’18 **This is the number of the tag that you want to open**’);
    return false;
    });
    });
    ****************
    http://www.artsmithmedia.com

    The HTML looks like this:
    LINKText

  2. Hi,
    I’m just trying to do the same, even copied and tried your script, but unfortunately, when I click in my Link, all tabs except the first one (the one that should be selected via link) disappear and the content won’t show up…

    Here is my code, per script tag behind the div. Also tried to put it on the bottom of the page, without any differences…

    $(document).ready(function(){
    var $tabs = $(“#accordion”).tabs(“#accordion div.pane”, {tabs: ‘h2’, effect: ‘slide’, initialIndex: null});
    $(‘#btn_movies’).click(function(event) {
    $tabs.tabs({ selected: 0 });
    });
    });

    Thank you in advance
    obm

  3. First comment very helpful, thanks.

  4. Rob Butz on September 9, 2011 at 10:25 am said:

    In retrospect, once you understand how the code fits together it’s not hard to understand, but having a working example with internal links would’ve been golden over on the jQuery UI site. I really appreciate that you posted this tutorial on internal links, thank you!

Post Navigation