javascript - How to properly update URL hash upon selecting a jQuery tab? - Stack Overflow

admin管理员组

文章数量:1297256

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?

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?

• javascript
• html
• jquery-ui-tabs

Share Improve this question Follow asked Jul 25, 2013 at 18:41 keeehlankeeehlan 8,0541616 gold badges5858 silver badges105105 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 21

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

本文标签： javascriptHow to properly update URL hash upon selecting a jQuery tabStack Overflow