使用localStorage执行此操作的简短、独立于布局的方式:
$("#tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function(event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
}
});
一种使用自定义数据属性的特定于布局的方法(如果要在脚本的其他地方以某种方式使用属性值,则可能很有用)。
jQuery 用户界面:
$("#tabs").tabs({
active: localStorage.getItem("currentTabIndex"),
activate: function(event, ui) {
localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
}
});
示例 HTML 布局:
<div id="tabs">
<div id="tabs-1" data-tab-index="0">
tab 1 stuff...
</div>
<div id="tabs-2" data-tab-index="1">
tab 2 stuff...
</div>
<div id="tabs-3" data-tab-index="2">
tab 3 stuff...
</div>
</div>