Question

I have the following jquery code that allows me to use tabs, to tab back and fourth between content/divs. My question is using the code below, how could I have it load the initial tab based on a variable in the url? So if I go to somesite.com/page.php#tab2, then instead of tab1 loading by default tab2 loads:

$('.tabcontent > div').hide();
$('.tabcontent > div:first-child').show();
$('.tabs > li:first-child').addClass('selected');
$('.tabs > li a').click(function() {
    var tab_id = $(this).attr('href');
    $(tab_id).parent().children().hide();
    $(tab_id).fadeIn();
    $(this).parent().parent().children().removeClass('selected');
    $(this).parent().addClass('selected');
    return false;
});

EDIT

Just to note this code is a click event, however if I want to change the tab via the url the person loads then it wont work unless they click a tab. So how can I get it to listen for a click and listen to see if there is a value present in the current url?

Answer 1

You can use gup function,found here:

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

This will allow you to read a URL parameter and use it to navigate to the selected tab.