答案：通过JSON语言包和data-lang-key属性实现多语言切换。准备lang-en.json和lang-zh.json文件，标记需翻译元素如
lang-zh.json
把语言包放在
目录下，方便统
一加
载。
2. 标记需要翻译的元素
给需要多语言支持的HTML元素添加
属性，指向语言包中的键名。
立即学习
“
前端免费学习笔记（深入）
”；
初始文本可以是默认语言（如英文），加载后会被自动替换。
elasticsearch-9.4.0 win
PHP中文网提供Elasticsearch 9.4.0 Windows 版本压缩包下载解压即用，内置 OpenJDK 无需额外配置 Java 环境。该版本重磅推出原生 Prometheus 支持、正式版 Elastic Workflows 以及基于 NVIDIA cuVS 的 GPU 加速向量索引，大幅提升 AI 检索与可观测性能力。建议前往官网下载，快速体验极速搜索与强大的数据分析功能。
下载
3. 动态加载语言包并替换内容
使用JavaScript
异步加载
对应语言的JSON文件，获取数据后遍历所有带
的元素，替换其文本内容。
4. 添加语言切换按钮
提供用户操作入口，点击触发语言加载。
可结合localStorage保存用户选择，刷新后保持语言偏好。
基本上就这些。结构清晰，扩展性强，支持任意语言添加。不复杂但容易忽略细节，比如键名一致性、网络失败处理。后续可封装成函数或轻量模块复用。基本上就这些。
Hello
，用JavaScript加载对应语言包并替换文本内容，提供按钮切换语言，结合localStorage保存用户偏好，页面加载时读取首选语言自动切换，结构清晰且易于扩展。 在HTML中实现 多语言 切换，核心是通过加载不同语言包并动态替换页面内容。不需要依赖复杂框架，用原生JavaScript就能完成。关键是结构清晰、数据分离、替换精准。 1. 准备语言包文件（JSON格式） 将每种语言的文本内容存为独立的JSON文件，便于维护和扩展。 例如： lang-en.json{
"greeting": "Hello",
"welcome": "Welcome to our website"
}{
"greeting": "你好",
"welcome": "欢迎访问我们的网站"
}/langs/data-lang-keyHello
Welcome to our website
data-lang-keyasync function loadLanguage(lang) {
const res = await fetch(`/langs/lang-${lang}.json`);
const texts = await res.json();
document.querySelectorAll('[data-lang-key]').forEach(el => {
const key = el.getAttribute('data-lang-key');
if (texts[key]) {
el.textContent = texts[key];
}
});
}
// 切换语言示例
function switchToChinese() {
loadLanguage('zh');
}
function switchToEnglish() {
loadLanguage('en');
}
function setLanguage(lang) {
loadLanguage(lang);
localStorage.setItem('preferred-lang', lang);
}
// 页面加载时读取上次选择
window.onload = () => {
const saved = localStorage.getItem('preferred-lang') || 'en';
loadLanguage(saved);
}