刷新后保持tab选中状态需用sessionstorage存取activetab：1. 为tab按钮和面板添加data-tab与id匹配标记；2. 点击时存data-tab值到sessionstorage并激活对应面板；3. dom加载后读取并激活，无缓存则默认首项；4. 封装activatetab统一处理面板与按钮状态。
刷新页面后保持Tab页选中状态，关键是在切换Tab时把当前激活的索引或标识存入 sessionStorage，页面加载时读取并高亮对应Tab。它天然适合单次会话内跨刷新持久化，且不随浏览器关闭而清除（区别于 localStorage）。
1. 给Tab容器和面板添加结构化标记
确保每个Tab按钮有唯一可识别的 data-tab 属性（如 ID 或序号），对应内容区用相同值的 id 或 data-target 关联：
<div class="tabs"> <button type="button" data-tab="tab-home">首页</button> <button type="button" data-tab="tab-about">关于</button> <button type="button" data-tab="tab-contact">联系</button> </div> <div class="tab-panels"> <div id="tab-home" class="tab-panel">首页内容</div> <div id="tab-about" class="tab-panel">关于内容</div> <div id="tab-contact" class="tab-panel">联系内容</div> </div>
2. 切换Tab时保存选中状态到 sessionStorage
为所有Tab按钮绑定点击事件，点击时将当前 data-tab 值写入 sessionStorage，同时更新UI：
document.querySelectorAll('.tabs button').forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.dataset.tab;
// 保存到 sessionStorage
sessionStorage.setItem('activeTab', tabId);
// 激活对应面板（示例逻辑）
activateTab(tabId);
});
});
3. 页面加载时恢复上次选中的Tab
在 DOM 加载完成后（如 DOMContentLoaded 事件中），从 sessionStorage 读取 activeTab，若存在则触发对应Tab的激活逻辑：
document.addEventListener('DOMContentLoaded', () => {
const savedTab = sessionStorage.getItem('activeTab');
if (savedTab) {
activateTab(savedTab);
// 可选：高亮对应按钮（如添加 .active 类）
document.querySelector(`.tabs button[data-tab="${savedTab}"]`)?.classList.add('active');
} else {
// 默认激活第一个Tab
const firstTab = document.querySelector('.tabs button');
if (firstTab) {
activateTab(firstTab.dataset.tab);
firstTab.classList.add('active');
}
}
});
4. 封装通用的激活函数
避免重复逻辑，把“显示指定Tab内容 + 切换按钮状态”封装成函数：
function activateTab(tabId) {
// 隐藏所有面板
document.querySelectorAll('.tab-panel').forEach(el => el.classList.remove('active'));
// 显示目标面板
document.getElementById(tabId)?.classList.add('active');
// 清除所有按钮的 active 状态
document.querySelectorAll('.tabs button').forEach(btn => btn.classList.remove('active'));
// 激活对应按钮
document.querySelector(`.tabs button[data-tab="${tabId}"]`)?.classList.add('active');
}
注意：sessionStorage 是协议+域名+端口级别的隔离，同源下多个标签页互不影响；刷新、前进/后退均保留数据；关闭整个浏览器窗口（非单个标签页）后会被清空。不复杂但容易忽略细节——比如没处理首次访问无缓存的情况，或没同步按钮与面板的 active 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
