如何在选择jQuery选项卡时正确更新URL哈希？

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>

我该如何使用jQueryUI的Tab功能，并在选择新选项卡时强制更新URL哈希？

- keeehlan

Answer 1

使用此代码创建您的jQuery UI选项卡：

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

我创建了这个答案，是因为我找不到一个最新的方法。希望这能帮助其他人！

- keeehlan

---

FYI - 在早期版本的jQuery中，它是使用'select'而不是'beforeActivate'。 - Ben Laan

FYI-2 - 在旧版本的jQuery中，使用'ui.panel.id'而不是'ui.newPanel.selector'（至少对我来说有效）。 - Nick Niebling

Answer 2

除了在选项卡更改时更新哈希（使用beforeActivate事件，如shruggernaut的回复中所述）之外，更新哈希更改时的活动选项卡非常有用（即启用浏览器历史记录，后退/前进按钮和用户手动输入哈希）。

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

- Dejan Milosevic