JS多语言切换后导航栏a标签样式与href丢失问题

三个问题直接导致你描述的异常，和现象完全对应：

• 元素选择器写错了：你用document.querySelector('.aboutus')这类选择器拿到的是导航栏的<li>外层元素，不是里面包裹的<a>标签。直接给<li>设置textContent时，会把li内部所有子元素（也就是带href属性、关联CSS样式的a标签）全部清空替换，翻译文本直接塞在li里，自然就成了无样式、无法点击的纯文本。而页面里的h1、p标签本身没有嵌套子元素，直接设置textContent不会破坏结构，所以显示正常。
• 语言包键名大小写不匹配：拉脱维亚语的配置项里，第一个键写的是大写开头的Aboutus，你JS里取值用的是全小写的aboutus，切到拉脱维亚语时这一项会取到undefined，直接显示空白。
• 事件绑定范围错了：你用document.querySelectorAll('a')给页面所有a标签都绑了语言切换的点击事件，连导航栏里本来负责页面跳转的a标签也被绑了事件，点击时会触发语言切换逻辑，和正常跳转冲突。

直接替换原有JS部分即可，HTML结构不用改动：

const langEl = document.querySelector('.langWrap');
// 仅选中语言切换栏的按钮，不要选中全页面所有a标签
const langSwitchLinks = document.querySelectorAll('.langWrap a');
const titleEl = document.querySelector('.headings');
const descrEl = document.querySelector('.description');
// 选中导航li内部的a标签，而不是li本身
const aboutUsLink = document.querySelector('.aboutus a');
const newsLink = document.querySelector('.news a');
const resultsLink = document.querySelector('.results a');
const leaguesLink = document.querySelector('.leagues a');
const loginLink = document.querySelector('.login a');

langSwitchLinks.forEach(el => {
    el.addEventListener('click', (e) => {
        // 阻止语言切换按钮默认跳转到#的行为
        e.preventDefault();
        langEl.querySelector('.active').classList.remove('active');
        el.classList.add('active');

        const currentLang = el.getAttribute('language');
        const langData = data[currentLang];

        titleEl.textContent = langData.headings;
        descrEl.textContent = langData.description;
        // 给a标签本身设置文本，不会破坏a的href和样式
        aboutUsLink.textContent = langData.aboutus;
        newsLink.textContent = langData.news;
        resultsLink.textContent = langData.results;
        leaguesLink.textContent = langData.leagues;
        loginLink.textContent = langData.login;
    });
});

const data = {
    "english": {
        "aboutus": "About Us",
        "news": "News",
        "results": "Results",
        "leagues": "Leagues",
        "login": "Profile",
        "headings": "News",
        "description": "Last weekend there were a lot of great games."
    },
    "latvian": {
        // 修正键名大小写，和英文配置保持一致
        "aboutus": "Par mums",
        "news": "Jaunumi",
        "results": "Rezultāti",
        "leagues": "līgas",
        "login": "profils",
        "headings": "Jaunumi",
        "description": "Pagājušajā nedēļā bija ļoti daudz labu spēļu"
    }
}

• 收窄事件绑定范围：只给语言切换栏的EN/LV按钮绑点击事件，避免导航跳转链接被误触发逻辑
• 修正赋值目标：把翻译文本赋值给导航li内部的a标签，只会替换a标签内的文字，不会破坏a标签本身的href属性、CSS关联
• 修正语言包键名：把拉脱维亚语配置里大写开头的Aboutus改成小写aboutus，和取值键名完全匹配
• 增加默认事件阻止：点语言切换按钮时不会因为href="#"跳回页面顶部

优化建议：后续多语言项变多的话，不用一个个手动选元素，可以给所有需要翻译的元素加data-i18n自定义属性，遍历属性批量匹配语言包赋值，维护成本低很多。

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