Changing jquery ui tabbed location.hash

Question

I am trying to find a way to change window.location.hash to the currently selected tab in the JQuery UI Tabs .

I tried:

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

This causes the hash to change to # undefined when the tab changes.

I also tried:

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

But this does not seem to work at all.

Any help would be greatly appreciated. Thank.

Edit: it looks like part of my original problem had something to do with js somewhere else, interfering with this. Both the accepted answer and the other proposed answer are slightly modified, work. Thanks to everyone.

Answer 1

In your case, the ui.tab event handler function is a binding element. You can get its hash value as follows:

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

Does this work for you?

Answer 2

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

Answer 3

While some of the solutions above work, they cause the page to skip in some cases, since the window.location.hash API is designed to go to a specific part of the page.

This neat solution proposed here solves this problem.

  $("#tabs").bind("tabsshow", function(event, ui) { history.pushState(null, null, ui.tab.hash); }); 

Answer 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

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

Answer 6

Will this be what you are going to do?

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

Answer 7

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

Answer 8

Many of the answers above do not work with the current version of jQuery UI tabs. Here is what I am using now:

 var tabsUi = $('#tabs'); tabsUi.tabs(); // Add hash to URL when tabs are clicked tabsUi.find('> ul a').click(function() { history.pushState(null, null, $(this).attr('href')); }); // Switch to correct tab when URL changes (back/forward browser buttons) $(window).bind('hashchange', function() { if (location.hash !== '') { var tabNum = $('a[href=' + location.hash + ']').parent().index(); tabsUi.tabs('option', 'active', tabNum); } else { tabsUi.tabs('option', 'active', 0); } }); 

Answer 9

My way for jQuery UI 1.10.3

 $("#tabs").tabs({ beforeActivate: function(event, ui) { var hash = ui.newTab.children("li a").attr("href"); window.location.hash = hash; } }); 

Answer 10

I am using the tab plugin which you can find on github: https://github.com/jquerytools/jquerytools.github.com

Answer 11

This worked for me using jQuery 1.8

 $('#tabs').tabs({ activate: function(event, ui) { window.location.hash = ui.newPanel.attr('id'); } }); 

Answer 12

After looking at some other jQueryUI API questions and documents, I found that it ended up working for me.

 $(document).ready(function() { $("#tabs").tabs({ activate: function( event, ui ) { location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1); } }); }); 

Answer 13

It seems that ui.tab itself does not return a valid string. (Instead, it returns undefined, so you would say that it returns nothing.)

Try looking around the dev version of ui.jquery.js for any returns, maybe you need to call the child ui.tab; -)

Answer 14

This code works fine for me:

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

Answer 15

This code works for me:

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

Answer 16

The following code works for me.

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

Answer 17

This piece of code worked for me:

 window.location.hash="";