How to update url hash correctly when selecting jQuery tab?

Question

HTML:

<div id="tabs"> <ul> <li><a href="#settings">Settings</a></li> <li><a href="#fields">Fields</a></li> </ul> <div id="settings"> //Tab Contents </div> <div id="fields"> //Tab Contents </div> </div> 

How can I apply the functionality of jQueryUI Tab and make it update the URL hash when a new tab is selected?

Answer 1

In addition to updating the hash when changing tabs (with the beforeActivate event, as in shruggernaut's answer), it is very useful to update the active tab when changing the hash (i.e. include browser history, back / forward buttons and manual user input to the hash)

 $(window).on('hashchange', function () { if (!location.hash) { $('#tabs').tabs('option', 'active', 0); // activate first tab by default return; } $('#tabs > ul > li > a').each(function (index, a) { if ($(a).attr('href') == location.hash) { $('#tabs').tabs('option', 'active', index); } }); }); 

Answer 2

Use this code to create jQuery user interface tabs:

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

I created this answer because I cannot find any with the modern method. Hope this helps someone else!