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.

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.

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.

Solution 1

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?

Solution 2

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

Solution 3

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);
  });

Solution 4

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

Solution 5

my simple solution without jumping:

    $("#tabs").tabs({
        activate: function (event, ui) {
            var scrollPos = $(window).scrollTop();
            window.location.hash = ui.newPanel.selector;
            $(window).scrollTop(scrollPos);
        }
    });

View more solutions

Comments

[Barbaros Alp]

are you trying to open a link in the tab where the link clicked from ?

[Tarun Chaudhary]

No, the links I'm opening are part of the current page itself, no ajax/etc.

[Admin]

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

[Barry Chapman]

Is there a workaround that prevents the page from jumping down to that hash anchor in the page when a tab is clicked?

[Tarun Chaudhary]

Unfortunately no, I receive many ui.tab is undefined errors upon page load or tab change.

[Serxipc]

I've been trying with the demo that appears on the doc page and works fine with FF 3 and IE 7. Are you triggering the events manually?

[Tarun Chaudhary]

I tried as you suggested with the demo page and your solution did end up working, thanks for the solution, I'll have to figure out what else in my code was stopping it from working. Thanks

[Tarun Chaudhary]

When I tried using the demo code this solution slightly modified did work. The only change I would suggest is making it: window.location.hash = ui.tab.hash;

[Serxipc]

If you are testing on Firefox, install the Firebug extension and put a console.trace() to track where the problems come from.

[Michael Reed]

This worked as the best solution for me. Other suggestions resulted in the page jumping to the tab selected when the location hash was updated. Seconding "window.location.hash = ui.tab.hash;" in place of what is provided in the example, tho.

[vvohra87]

@Fabdrol you need ui.tab.index ;)

[Billkamm]

this works well for me, however, I'm using ajax to load my tabs, so the hash is always "ui-tabs-1", "ui-tabs-2", etc... This means when I re-order, add, or remove tabs the bookmarks break. Do you know a way to do this where I can use custom hash names for the tabs?

[Rafael Capucho]

Perfect solution, the only one that worked for me :)

[wblaschko]

This should probably be marked as the correct answer.