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?


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


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