本文讲解如何修复多语言网站中语言选择器状态不随页面切换而更新的问题,核心在于确保每个语言版本的 html 中 “ 的 `selected` 属性与当前语言一致,从而实现双向切换可用。
在您提供的代码中,语言切换逻辑(通过 replace() 修改 URL)基本可行,但存在一个关键疏漏:语言选择器的 UI 状态(即哪个 被高亮选中)并未根据当前页面语言动态更新。浏览器只会按 HTML 源码中 selected 属性的有无来渲染初始选中项;而您的 JS 仅监听变更事件,并未在页面加载时主动设置选中状态。
这意味着:
- 访问 index.html(英语页)时,EN 是默认选中(因它在 HTML 中排第一且无 selected 属性)✅
- 但跳转到 mk/home-mk.html 后,HTML 中仍只有 EN 和 MK,两者均无 selected —— 浏览器默认选中第一个(即 EN),导致下拉框始终显示 “EN”,即使当前是马其顿语页面 ❌
- 因此用户无法点击 “EN” 切回英文(因为视觉上它已是选中态,change 事件不会触发)
✅ 正确做法:服务端或静态页层面预设 selected
您需要为每种语言的 HTML 文件手动(或通过构建脚本)设置对应 的 selected 属性: