changing location.hash with jquery ui tabs

Question

I've been trying to find a way to change the window.location.hash to the currently selected tab in [Jquery UI Tabs][1].

I've tried:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
window.location.hash = ui.tab;
})

This results in changing the hash to #undefined when the tab is changed.

I've also tried:

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

But this doesn't seem to be triggered at all.

Any help would be appreciated. Thanks.

[1]: http://docs.jquery.com/UI/Tabs"Jquery UI Tabs"

Edit: It looks like part of my initial problem had something to do with js somewhere else interfering with this. Both the accepted answer and the other suggested answer slightly modified do work. Thanks all.

Answer 1

Would this be what you're going for?

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

Answer 2

In your event handler function ui.tab is an anchor element. You can retrieve its hash value like this:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
    window.location.hash = ui.tab.hash;
})

Does this work for you?

Answer 3

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

Answer 4

It seems like ui.tab itself doesn't return a valid string. (instead it returns undefined, so you'd say it doesn't return anything at all.)

Try looking around in the dev version of ui.jquery.js whether there are any returns there, maybe you have to call a child of ui.tab ;-)

Answer 5

this is a pretty awesome demo of this technique: http://jqueryfordesigners.com/jquery-tabs/

Answer 6

I'm using this plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm

Answer 7

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