Opening JQuery tabs with URL, and adding a hash to URL on tab click

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/

Kimbra

document.location.hash=var; if you're just looking to add something to the URL... – Striated

Would I be able to access that tab through an address though? I want to basically do what's being done when you hit a tab in the example I gave in the link. – Kimbra

Then why not just copy that example..? – Striated

I've been trying haha. It's what I'm working on right now. Thanks for your help though. – Kimbra

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.

Kimbra

Answer 2

You can also try in the following way. I have name property in the anchor element. This name will be added as hash URL.

Javascript:

$( "#tabs" ).tabs({
    select: function(event, ui) {                   
        window.location.hash = ui.tab.hash;                     
    }
});

HTML:

<div id="tabs" > 
    <ul>
        <li><a name="Test1" href="Home/Test1"> Tab 1  </a></li>
        <li><a name="Test2" href="Home/Test2"> Tab 2  </a></li>
        <li><a name="Test3" href="Home/Test3"> Tab 3  </a></li>            
    </ul>        
</div>

Affront