网站语言切换后导航悬停与锚点跳转功能失效问题求助

问题根源推测 #

• 语言切换脚本大概率是在替换文本时直接重写了<a>标签的整个DOM结构（比如用innerHTML覆盖、创建新元素替换原有节点），导致<a>的href属性被意外清除，或是破坏了CSS伪类选择器的匹配层级。
• 也可能是替换文本时给<a>标签嵌套了额外元素，让nav ul li a:hover::after的选择器无法命中目标元素。

具体修复方案 #

1. 仅替换文本内容，保留原有DOM元素与属性 #

不要修改整个<a>节点，只更新其文本内容，确保href属性和结构完全保留：

// 错误写法：易破坏元素属性与结构
document.getElementById('nav-about').innerHTML = langData.about;

// 正确写法：仅替换文本
const targetLink = document.getElementById('nav-about');
targetLink.textContent = langData.about;

textContent会直接替换元素内的纯文本，不会改动任何属性或嵌套结构，完美保留锚点和CSS选择器的匹配基础。

2. 检查CSS选择器与DOM结构的匹配性 #

切换语言后用浏览器开发者工具（F12）查看导航<a>标签的层级：

• 确认<a>仍处于nav > ul > li的层级下，若脚本修改了层级（比如给<a>套了额外<span>），则调整CSS选择器，比如改为nav ul li a span:hover::after（根据实际结构调整）。
• 确保::after伪元素的CSS规则没有被切换语言的脚本意外覆盖（比如动态添加了冲突的display: none或content: ''清空）。

3. 排查脚本对href属性的误操作 #

检查语言切换逻辑，确保没有批量修改或清除<a>的href属性：

• 如果是遍历元素批量替换文本，要明确只针对元素的文本节点操作，跳过href等属性的修改。
• 切换语言后，在开发者工具的Elements面板中查看<a>标签的href值是否仍为#header这类锚点路径。

4. 避免干扰原生行为 #

如果导航绑定了自定义JS事件，确保语言切换时不会解绑原生hover或锚点跳转的默认行为：

• 原生锚点跳转和CSS hover不需要JS干预，只要DOM结构和属性正确就会自动生效，无需额外绑定事件。

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