Accessible jquery tabs - direct link to tab

Question

I have tabs on my page. The code for them is following:

$('ul#tabs li a').click(function(){
        var id = $(this).attr('id');

        var counter = 1;

        $("ul#tabs a.current").removeClass('current');

        $(this).addClass('current');

        $('.contentBox').not('.' + id).hide();

        $('.contentBox.' + id).show();

        if(id=='all'){
            $('.contentBox').show();
        }

        $('.contentBox').removeClass('last');

        $('.contentBox').each(function() {          
            if(counter%4==0) {
                $(this).addClass('last');
            }

            if($(this).css('display')!='none'){
                counter++;
            }
        });

        return false;
    });

Now I would like to add possibility to direct linking so that user can copy the link to certain tab and paste it to address bar and it goes to that tab/div straight away. Like this:

TabLinkforContent1 TabLinkforContent2 TabLinkforContent3

Atm when page is loaded it shows the TabLinkforContent1 and now user needs to click for example the TabLinkforContent3 link to vie Content on div3. I want to change the code so that use can copy TabLinkforContent3 address and give it to someone and if he uses that url it shows automatically content div3. So url would be something like www.domain.com/page#div3 i guess. But I dont know how to change the javascript code.

Any help would be appreciated :)

Answer 1

Since your links are ID based, you can just put this after your current code:

$(function() {
  $('ul#tabs li a').click(function(){
    $("ul#tabs a.current").removeClass('current');
    $(this).addClass('current');

    $('.contentBox').show().removeClass('last');
    if (this.id !='all') $('.contentBox').not('.' + this.id).hide();

    $('.contentBox:visible').each(function(i) {          
      if ((i+1)%4==0) $(this).addClass('last');
    });
    return false;
  });
  if(location.hash) $(location.hash).click();
});

This will trigger the click handler you just bound on the <a id="something"> element the has identifies. Combined with your current code shortened down: