Question

I’m working on a web application, and I am using the JQuery UI Tabs plugin to separate the data.
If I mouse over each one of the tabs, on the lower left of the screen I can see the URL of that tab (ex: testPage.com/#tab1 or testPage.com/#tab2)

Now, if I type in one of those addresses into the URL bar, I do not go to the tab related to the hash in the URL, but instead I go to the first tab in the application.

My question is: How would I go about anchoring a specific tab to a URL?
So if someone goes to testPage.com/#tab3, They will end up in tab 3 on the application.

I am doing this also because I want to use the JQuery BBQ plugin to modify the browser history, so I can have a user go to the last tab they were on when they hit the back button.

Example:
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

Answer 1

I ended up using the JQuery Address plugin from Asual. I did the following:

    // For forward and back
    $.address.change(function(event){
        $("#main_tabs").tabs( "select" , window.location.hash );
    });

    // when the tab is selected update the url with the hash
    $("#main_tabs").bind("tabsselect", function(event, ui) { 
        window.location.hash = ui.tab.hash;
    });

Hopefully this helps someone!
Thank you.