jQuery show requested tab on page load

Question

Hi!

I am using the following code for tabs on a site...

$(document).ready(function(){
    $('.tab').click(function () {
        $('.tabs > li.active').removeClass('active');
        $(this).parent().addClass('active');
        $('div.tab_contents_container > div.tab_contents_active').removeClass('tab_contents_active');
        $(this.rel).addClass('tab_contents_active');
    });
});

Is there any way that I can load a specified tab from the url? For example: The default tab is "#tab1" but I want to load "#tab2" when a specified url is requested... basically I want "#tab1" to be default unless a URL like http://example.com/page.html#tab2 is requested... is this possible?

Answer 1

Pass which tab you want in through the querystring, then use javascript to get that querystring variable and activate that particular tab.

Answer 2

If your structure is like this for tabs (best I can guess):

 <li><a href="#tab2" rel="tab2" class="tab">Tab 2</a></li>

You can do this:

$(function(){
    $('.tab').click(function () {
        $('.tabs > li.active').removeClass('active');
        $(this).parent().addClass('active');
        $('div.tab_contents_container > div.tab_contents_active').removeClass('tab_contents_active');
        $(this.rel).addClass('tab_contents_active');
    }).each(function() {
      if($(this).get(0).hash == location.hash) {
        $(this).click();
      }
    }
});

Answer 3

location.hash is a bit uncomfortable.

See jquery.bbq plugin

And just react on haschchange event, and trigger it instead of namually changing tabs.

Answer 4

I need same thing please help me I have to select particular tab based on querysting from another tab.

Here is the code

and same other links with different parameters like href="ProjectTeam.aspx?Group=C" and so on