How to properly update URL hash upon selecting a 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 jQueryUI's Tab functionality and force it to update the URL hash upon selecting a new tab?

Answer 1

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!