HTML页面实现中英文切换的核心思路是提前维护不同语言对应的文本资源，通过用户操作触发语言切换事件，动态更新页面中所有需要展示文案的DOM元素内容。这种方式不需要重新加载页面，切换过程流畅，适配成本较低。
一、准备多语言文本资源
首先需要创建一个对象，按照语言类型分类存储所有页面需要展示的文案，键名统一对应页面中需要替换文案的元素标识，方便后续查找更新。
// 多语言文本资源对象
const langResources = {
zh: {
title: "欢迎来到我的网站",
nav_home: "首页",
nav_about: "关于我们",
nav_contact: "联系我们",
content: "这是中文版本的页面内容"
},
en: {
title: "Welcome to My Website",
nav_home: "Home",
nav_about: "About Us",
nav_contact: "Contact",
content: "This is the English version of the page content"
}
};
二、页面基础结构搭建
给需要替换文案的元素添加统一的自定义属性，比如data-lang-key，属性值对应多语言资源对象中的键名，同时添加语言切换按钮。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-lang-key="title">欢迎来到我的网站</title>
</head>
<body>
<header>
<nav>
<ul>
<li data-lang-key="nav_home">首页</li>
<li data-lang-key="nav_about">关于我们</li>
<li data-lang-key="nav_contact">联系我们</li>
</ul>
</nav>
<button id="langSwitch">切换为英文</button>
</header>
<main>
<p data-lang-key="content">这是中文版本的页面内容</p>
</main>
</body>
</html>
三、实现切换逻辑
通过JavaScript监听切换按钮的点击事件，判断当前语言类型，然后遍历所有带有data-lang-key属性的元素，更新其文本内容，同时更新按钮的提示文案和页面的lang属性。
// 当前语言状态，默认中文
let currentLang = "zh";
// 获取切换按钮
const switchBtn = document.getElementById("langSwitch");
// 获取所有需要替换文案的元素
const langElements = document.querySelectorAll("[data-lang-key]");
// 更新页面文案的函数
function updatePageLang() {
// 遍历所有带data-lang-key的元素
langElements.forEach(element => {
const key = element.getAttribute("data-lang-key");
// 如果资源中存在对应键名的文案，就更新元素内容
if (langResources[currentLang][key]) {
// 如果是title标签，需要更新document.title
if (element.tagName.toLowerCase() === "title") {
document.title = langResources[currentLang][key];
} else {
element.textContent = langResources[currentLang][key];
}
}
});
// 更新html标签的lang属性
document.documentElement.lang = currentLang;
// 更新切换按钮的文案
switchBtn.textContent = currentLang === "zh" ? "切换为英文" : "切换为中文";
// 将当前语言保存到本地存储，刷新页面后保持语言状态
localStorage.setItem("pageLang", currentLang);
}
// 页面加载时检查本地存储中的语言设置
window.addEventListener("DOMContentLoaded", () => {
const savedLang = localStorage.getItem("pageLang");
if (savedLang && (savedLang === "zh" || savedLang === "en")) {
currentLang = savedLang;
}
updatePageLang();
});
// 给切换按钮添加点击事件
switchBtn.addEventListener("click", () => {
// 切换语言类型
currentLang = currentLang === "zh" ? "en" : "zh";
updatePageLang();
});
四、注意事项
- 所有需要切换的文案都要提前录入到多语言资源对象中，避免切换时出现文案缺失的情况。
- 如果页面中有动态生成的DOM元素，需要在元素生成后手动调用更新文案的逻辑，或者给动态元素也添加
data-lang-key属性，在更新函数中统一处理。 - 本地存储的语言状态可以在用户清除浏览器数据时失效，若需要更持久的状态可以结合后端用户设置实现。
- 对于图片中的文字、视频字幕等多媒体内容，也需要准备对应语言版本的资源，通过切换语言时替换资源路径实现适配。
HTML多语言适配中英文切换JavaScript修改时间：2026-06-17 02:51:38