JQuery UI tabs with selected by #location.hash

I’m using JQuery UI Tabs in an application.
I really love the implementation, never seen anything so easy.

If you want to make sure another tab but the first one is selected on page load, just give the ‘selected’ option like so:

$("#tabs").tabs({selected: 1});

For the second tab in the tabarray (counting starts with 0).

If you want to make your url’s do the following however: http://www.example.com/mytabbedpage.do#gotothistab. There’s no support from JQuery itself just yet.

I found a solution on Rootsmith Inc’s blog.
Especially sami‘s comment helped me:

1
2
3
4

$(’#my_selector’).tabs({
’select’: function(){$(this).index($(document.location.hash));},
‘load’: function(event, ui){document.location.hash = ui.panel.id;}
});

However, applying this loses your default tab.
My solution:

1
2
3
4
5

var selectedtab = 1;
if(document.location.hash!="" && typeof(document.location.hash)!="undefined" && document.location.hash!= null){
	selectedtab = $(document.location.hash).index() - 1;
}
$("#tabs").tabs({selected:selectedtab});

I know, I like to be thorough in my checks