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