切换页面语言时如何保留已选中的a标签href锚点状态？

本方案完全满足原有交互逻辑不可修改的约束，所有新增代码独立编写，不侵入原有业务逻辑：

核心思路 #

不需要改动原有tab点击、内容展示的任何代码，通过状态读写的方式实现跨语言页面的状态同步：

• 语言切换跳转前，从DOM中读取用户当前选中的锚点tab
• 将该tab对应的锚点值附加到目标语言版本的跳转链接上
• 目标语言页面加载完成后，根据链接携带的锚点值，模拟用户点击对应tab，自动走原有交互逻辑完成内容展示

可直接落地的代码 #

以下代码完全独立，不需要修改已有的tab切换逻辑、CSS、HTML结构：

// 独立新增：拦截语言切换按钮的默认跳转
document.querySelectorAll('.lang-switch-btn').forEach(langBtn => {
  langBtn.addEventListener('click', (e) => {
    e.preventDefault();
    // 直接从现有DOM读取当前激活的tab，不修改原有状态判断规则
    const activeTab = document.querySelector('.content.active');
    const activeAnchor = activeTab ? activeTab.getAttribute('href') : '';
    // 组装带锚点状态的目标跳转地址
    const targetUrl = new URL(langBtn.href);
    if (activeAnchor) {
      targetUrl.hash = activeAnchor;
    }
    window.location.href = targetUrl.toString();
  })
})

// 独立新增：页面加载完成后同步锚点选中状态
window.addEventListener('DOMContentLoaded', () => {
  const currentHash = window.location.hash;
  if (!currentHash) return;
  // 匹配hash对应的tab元素，触发原生点击事件，复用原有写好的切换逻辑
  const targetTab = document.querySelector(`.content[href="${currentHash}"]`);
  if (targetTab) {
    targetTab.click();
  }
})

可选优化 #

如果不希望锚点值直接暴露在地址栏，可以用sessionStorage做状态传递：

• 语言跳转前，将当前激活的锚点值存入sessionStorage
• 目标语言页面加载时，从sessionStorage读取对应锚点值，触发tab选中逻辑，读取完成后清除临时存储

落地注意事项 #

• 读取激活tab状态时，统一通过active类匹配，不要硬编码tab的类名，后续新增tab项时无需修改语言切换的关联逻辑
• 触发tab选中的代码要等DOM完全加载完成再执行，避免因元素未渲染完成导致触发失败
• 整个实现过程不修改原有tab的事件绑定、类名判断逻辑，完全符合原有交互不可改动的要求

内容的提问来源于stack exchange，提问作者william_eduards