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 jQueryUI's Tab functionality and force it to update the URL hash upon selecting a new tab?
Use this code to create your jQuery UI tabs:
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
});
I created this answer because I cannot find a single one with an up-to-date method. Hope this helps somebody else!
Besides updating the hash on tab change (with the beforeActivate event as in shruggernaut's reply) it is very useful to update the active tab on hash change (i.e. enabling browser history, back/forward buttons and user typing in the hash manually):
$(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);
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With