Search code examples
jqueryjquery-uijquery-ui-tabs

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


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/


Solution

  • 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.