tabs using jquery

Question

I currently have a tabbed system in place, however it not doing exactly as I need it too, I was hoping that by navigating to the URL with #tab2 suffixed on then end it would navigate to my tabbed page and the tab that is present in the URL would be the one that is active, however the first tab in the sequence is always active, is there a way to check what is being passed in the URL first and if there is #tabid present then make that tab the current tab? My javascript currently looks like this,

$(".tab_content").hide(); //Hide all content
$("ul.tabNavigation li.shortlist").addClass("active").show(); //Activate first tab (in this case second because of floats)
$(".tab_content#shortlist").show(); //Show first tab content

//On Click Event
$("ul.tabNavigation li").click(function() {

    $("ul.tabNavigation li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

Answer 1

I would suggest you to use the TAB UI built by JQUERY

http://jqueryui.com/demos/tabs/#ajax

it would save you time aswell, and do the auto selection aswell... Plus it has a AJAX option so pages are loaded on request without having to change page.

Answer 2

Why not use the jQuery UI Tabs plugin http://jqueryui.com/demos/tabs/ ?

Answer 3

You can get the hash to use it by using window.location.hash.

So something like

var hash = window.location.hash;
if (hash) {
  $("ul.tabNavigation li").hasClass(hash).click();
}

Using hasClass as a generic stand-in for however you want to filter your LIs down.