页面刷新或返回时如何保留选中的tab标签页状态

页面刷新、触发浏览器返回操作时会重新解析加载初始HTML，你的代码里默认给第一个tab按钮硬编码了active类，且没有任何持久化存储用户选中状态、页面加载时恢复状态的逻辑，所以每次重载都会回到第一个默认tab。另外你的原始代码存在3处语法/逻辑笔误，会导致功能本身无法正常运行：

• HTML中onclick绑定的函数名为chooseReportType，JS中实际定义的函数名为chooseType，名称不匹配
• 函数形参定义为Type，内部获取元素时使用的变量名为ReportType，变量名不匹配
• 函数末尾多写了一个多余的闭合大括号，会触发JS语法错误

根据需求场景二选一即可：

方案1：localStorage本地存储（适合仅本地记住用户选择的场景） #

该方案会把用户选中的tab标识存在浏览器本地存储，即使关闭浏览器再重新打开页面，也能保留上次选中的状态。

修正后完整代码 #

HTML部分（去掉硬编码的active类，补全tab内容区示例）：

<div class="tab">
    <button class="tablinks" onclick="chooseReportType(event, 'apple')" data-tab="apple">apple</button>
    <button class="tablinks" onclick="chooseReportType(event, 'banana')" data-tab="banana">banana</button>
    <button class="tablinks" onclick="chooseReportType(event, 'cat')" data-tab="cat">cat</button>
</div>

<div id="apple" class="tabcontent">apple 对应内容</div>
<div id="banana" class="tabcontent">banana 对应内容</div>
<div id="cat" class="tabcontent">cat 对应内容</div>

JS部分：

function chooseReportType(evt, reportType) {
  let i, tabcontent, tablinks;
  // 隐藏所有tab内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 移除所有tab按钮的激活态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  // 激活当前选中的tab
  document.getElementById(reportType).style.display = "block";
  evt.currentTarget.classList.add("active");
  // 将当前选中tab存入本地存储
  localStorage.setItem("currentActiveTab", reportType);
}

// 页面加载完成后恢复上次选中的tab
window.addEventListener("DOMContentLoaded", () => {
  // 读取存储的tab，无存储记录时默认激活第一个tab（apple）
  const savedTab = localStorage.getItem("currentActiveTab") || "apple";
  // 找到对应tab按钮触发点击，复用已有切换逻辑，无需重复写状态切换代码
  const tabBtns = document.querySelectorAll(".tablinks");
  tabBtns.forEach(btn => {
    if (btn.dataset.tab === savedTab) btn.click();
  })
})

方案2：URL Hash存储（适合需要分享链接、绑定浏览器前进/后退历史的场景） #

该方案将当前选中的tab标识拼在页面URL的hash部分（即#后面的内容），浏览器前进/后退会自动记录hash变化，点击返回按钮时可以直接回到上一个选中的tab，同时把URL分享给其他人打开时，也会直接定位到对应选中的tab。

核心改动JS代码 #

HTML部分和方案1一致，JS逻辑调整如下：

function chooseReportType(evt, reportType) {
  let i, tabcontent, tablinks;
  // 隐藏所有tab内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 移除所有tab按钮的激活态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  // 激活当前选中的tab
  document.getElementById(reportType).style.display = "block";
  evt.currentTarget.classList.add("active");
  // 将tab标识写入URL hash
  window.location.hash = reportType;
}

// 初始化/切换tab的公共方法
function setActiveTab() {
  // 读取hash值，去掉开头的#，无hash时默认选apple
  const activeTab = window.location.hash.slice(1) || "apple";
  const tabBtns = document.querySelectorAll(".tablinks");
  tabBtns.forEach(btn => {
    if (btn.dataset.tab === activeTab) btn.click();
  })
}

// 页面首次加载时初始化tab
window.addEventListener("DOMContentLoaded", setActiveTab);
// 监听URL hash变化（点击浏览器前进/后退按钮会触发该事件），自动切换tab
window.addEventListener("hashchange", setActiveTab);

• 如果是后台系统、仅需要记住当前用户的操作习惯，不需要分享链接，选localStorage方案即可，实现简单不会改变URL
• 如果是公开页面、需要支持链接直达对应tab、需要浏览器前进后退同步tab状态，选URL Hash方案

内容的提问来源于stack exchange，提问作者ka hei tong