Javascript 如何在选择jQuery选项卡时正确更新URL哈希?
HTML:Javascript 如何在选择jQuery选项卡时正确更新URL哈希?,javascript,html,jquery-ui-tabs,Javascript,Html,Jquery Ui Tabs,HTML: //选项卡内容 //选项卡内容 如何应用jQueryUI的选项卡功能,并在选择新选项卡时强制它更新URL哈希?使用以下代码创建jQuery UI选项卡: <div id="tabs"> <ul> <li><a href="#settings">Settings</a></li> <li><a href="#fields">Fields&l
//选项卡内容
//选项卡内容
如何应用jQueryUI的选项卡功能,并在选择新选项卡时强制它更新URL哈希?使用以下代码创建jQuery UI选项卡:
<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>
我创建这个答案是因为我找不到一个具有最新方法的答案。希望这对其他人有帮助 除了更新标签更改时的哈希(使用Shuggernaut回复中的beforeActivate事件)外,更新标签更改时的活动标签非常有用(即启用浏览器历史记录、后退/前进按钮和用户手动键入哈希):
FYI-在较旧版本的jQuery中,它是“选择”而不是“beforeActivate”FYI-2-在较旧版本的jQuery中,它是“ui.panel.id”而不是“ui.newPanel.selector”(至少对我来说是这样)这是好东西。当这个问题与我有关时,我希望能得到这个代码。
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
});
$(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);
}
});
});