changing location.hash with jquery ui tabs
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?
$('#tabs').tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
While some of the above solutions work, they cause the page to jump around in some cases, as the window.location.hash API is designed to bring you to a specific part of the page.
This neat solution proposed here, solves that issue
$("#tabs").bind("tabsshow", function(event, ui) {
history.pushState(null, null, ui.tab.hash);
});
This worked for me, jQuery UI 1.10:
$('#elexumaps_events_tabs').tabs({
activate: function(event, ui) {
window.location.hash=ui.newPanel.selector;
}
});
See also: http://api.jqueryui.com/tabs/#event-activate