本文讲解如何修复多语言网站中语言选择器状态不随页面切换而更新的问题，核心在于确保每个语言版本的 html 中 `
在您提供的代码中，语言切换逻辑（通过 replace() 修改 URL）基本可行，但存在一个关键疏漏：语言选择器的 UI 状态（即哪个 <option> 被高亮选中）并未根据当前页面语言动态更新。浏览器只会按 HTML 源码中 selected 属性的有无来渲染初始选中项；而您的 JS 仅监听变更事件，并未在页面加载时主动设置选中状态。
这意味着：
- 访问 index.html（英语页）时，<option value="en">EN</option> 是默认选中（因它在 HTML 中排第一且无 selected 属性）✅
- 但跳转到 mk/home-mk.html 后，HTML 中仍只有 <option value="en">EN</option> 和 <option value="mk">MK</option>，两者均无 selected —— 浏览器默认选中第一个（即 EN），导致下拉框始终显示 “EN”，即使当前是马其顿语页面 ❌
- 因此用户无法点击 “EN” 切回英文（因为视觉上它已是选中态，change 事件不会触发）
✅ 正确做法：服务端或静态页层面预设 selected
您需要为每种语言的 HTML 文件手动（或通过构建脚本）设置对应 <option> 的 selected 属性：
<!-- 在 index.html 中 --> <select id="language-selector"> <option value="en" selected>EN</option> <option value="mk">MK</option> </select>
<!-- 在 mk/home-mk.html 中 --> <select id="language-selector"> <option value="en">EN</option> <option value="mk" selected>MK</option> </select>
? 增强建议：添加页面加载时的状态同步（可选）
若未来语言数量增加或需更健壮控制，可在 JS 中补充初始化逻辑：
<script>
const langSelector = document.querySelector('#language-selector');
// 页面加载时，根据当前 URL 自动设置选中项（增强容错）
const currentPath = window.location.pathname;
if (currentPath.startsWith('/mk/')) {
langSelector.value = 'mk';
} else {
langSelector.value = 'en';
}
// 切换处理
langSelector.addEventListener('change', function() {
const lang = this.value;
let url = window.location.origin + window.location.pathname;
if (lang === 'mk') {
// 假设英文页为 /index.html，马其顿页为 /mk/home-mk.html
if (url.endsWith('/index.html')) {
window.location.href = '/mk/home-mk.html';
} else if (url.endsWith('/about.html')) {
window.location.href = '/mk/about-mk.html';
} else if (url.endsWith('/contact.html')) {
window.location.href = '/mk/contact-mk.html';
} else {
window.location.href = '/mk/home-mk.html';
}
} else {
// 切回英文：移除 /mk/ 前缀并替换 -mk.html → .html
const mkRegex = /^\/mk\/(.*?)-mk\.html$/;
const match = url.match(mkRegex);
if (match) {
window.location.href = '/' + match[1] + '.html';
} else {
window.location.href = '/index.html';
}
}
});
</script>⚠️ 注意事项
- 不要依赖 localStorage 或 Cookie 实现初始选中：首次访问无历史记录时仍会出错；静态站点也应优先保证 HTML 本身语义正确。
- 路径匹配要严谨：示例中的正则和字符串替换需与实际文件结构严格一致，建议统一命名规范（如 about.html ↔ mk/about-mk.html）。
- SEO 友好提示：为不同语言页面添加 <link rel="alternate" hreflang="..."> 标签，帮助搜索引擎识别语言变体。
通过确保每个语言页面的 HTML 源码中 selected 属性准确反映当前语言，即可彻底解决选择器“卡死”、无法反向切换的问题。
