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哈希?
解决方法
除了更改选项卡更改上的哈希值(使用shruggernaut的回复中的beforeActivate事件),更新哈希更改的活动选项卡(即启用浏览器历史记录,后退/前进按钮和用户手动键入哈希)非常有用:
$(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',index);
}
});
});