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