Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to properly update URL hash upon selecting a jQuery tab?

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?

like image 686
keeehlan Avatar asked Jul 25 '13 18:07

keeehlan


2 Answers

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!

like image 84
keeehlan Avatar answered Oct 02 '22 16:10

keeehlan


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);
    }
  });
});
like image 22
Dejan Milosevic Avatar answered Oct 02 '22 18:10

Dejan Milosevic