刷新后仍停留在当前Tab需用sessionStorage记录并还原选中状态:点击时存tab索引或lay-id,加载时读取并手动激活对应tab及内容区,lay-id更适用于动态tab场景。

刷新后仍停留在当前 Tab,关键在于记录激活项标识,并在页面重载时主动还原选中状态。Layui 的 tab 本身不自动记忆位置,需借助浏览器存储(如 sessionStorage)手动保存和恢复。
用 sessionStorage 记录当前 Tab 索引
用户点击任意 tab 标题时,立即存下它的序号:
- 监听
.layui-tab-title li的 click 事件 - 用
$(this).index()获取当前点击项位置 - 存入
sessionStorage.setItem("tabIndex", index)
页面加载时还原选中状态
DOM 就绪后,读取存储值并手动激活对应 tab 和内容区:
- 用
sessionStorage.getItem("tabIndex")取出索引 - 给
.layui-tab-title li中对应位置添加layui-this类,移除兄弟项的该类 - 同步操作
.layui-tab-content > div:只让对应序号的 div 加layui-show,其余隐藏
注意 tab ID 更可靠(推荐用于多 tab 场景)
如果 tab 是动态生成或存在增删,仅靠索引容易错位。此时应改用唯一标识:
- 每个 tab 标签加
lay-id="user-list",对应 iframe 加data-frameid="user-list" - 点击时存的是
$(this).attr("lay-id"),而非索引 - 还原时用
$('li[lay-id="' + id + '"]').addClass("layui-this")定位更稳
不复杂但容易忽略:sessionStorage 在同源窗口内有效,关闭标签页即清空,正好符合“本次会话内保持”的需求。


















