changing location.hash with jquery ui tabs

Rob_24628 0
Viewed 66072

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.

tabs fragment-identifier jquery-ui jquery
18 Answers

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?

user_340090

Would this be what you're going for?

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

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

Admin1

My working solution.

jQuery v3.5.1, jQuery UI v1.12.1

$(".detail-groups").tabs({ activate: function(event, ui) {
                            window.location.hash = ui.newPanel[0].id;
                         }
                    });
user_25242650
Related