jQuery tabs - linking directly to a tab

Question

I have some jQuery tabs on a website and I am trying to make the tabs so they can be linked to directly.

What I mean by this is that, when a user enters a URL that includes the anchors for the tab, then when the page is loaded is should display that tab first.

My original jQuery code was gotten from http://jqueryfordesigners.com/jquery-tabs/ and did not include this ability. Here is the original code:

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

I have modified the code to this:

$(function () {
    var tabs = [];
    var tabContainers = $('div.tabs > div');
    $('div.tabs ul.tabNavigation a').each(function () {
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

// sniff for hash in url, and create filter search 
var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first'; 

$(tabs).click(function () {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).show();        
    // set up the selected class
    $(tabs).removeClass('selected');
    $(this).addClass('selected');        
    return false;
}).filter(selected).click();


});

This kind of works - when you link to the page with the anchor included in the URL, it brings you to the relevant tab's content, however, and other tabs are visible also (its not hidden the others) and the tab has also not been selected.

You can view an example of this:

No link to second tab, first one shown by default: http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/

Trying to link directly to the second tab: http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/#financial-performance

I have tried to figure out what is wrong with the jQuery code but I cannot figure it out. I would appreciate help with a solution

Answer 1

i edited your code to create a working example here (url with hash):

http://chrisvillanueva.com/stackoverflow/tabs.html#financial-performance

here's how i made it work:

1.) remove .filter() and .click() methods chained with the "div.tabs ul.tabNavigation a" click event handler. those methods always cause the first tab to get focus.

2.) create a selected tab hash like this:

var selectedTab = window.location.hash ? window.location.hash : '#cost-improvement';

"selectedTab" will contain the value we use for tab #id reference.

3.) then initialize the requested tab with these lines:

//initalizes tab in url
  $('div.tabs ul.tabNavigation li'+selectedTab+' a').addClass('selected');
  tabContainers.hide().filter($(''+selectedTab+'-tab')).show();

4.) in the tab markup, define each list item element with this syntax:

<li id="financial-performance"><a href="#financial-performance-tab">Second</a></li>

where the li contains a unique id and the anchor element references the related tab.

5.) setup your tab panel markup like this:

<div id="financial-performance-tab">
       <h2>Second</h2>
        ....

of course, it helps more if you look at the source for the page i linked. it will give you better context.

quick note: valid url hash values are:

• cost-improvement

• financial-performance

• change-management