需通过HTML标记、多语言JSON资源文件及JavaScript动态加载实现网页多语言切换：一、按语言建zh.json/en.json/ja.json等键名统一的翻译文件；二、用data-i18n等属性标记待译元素；三、fetch加载对应JSON并替换文本/属性；四、按钮绑定事件切换语言并防重复加载；五、扩展支持title/alt/innerHTML等多场景翻译。

如果您希望网页支持多种语言，用户可根据自身偏好切换界面语言，则需要通过HTML结合JavaScript和资源文件实现多语言内容的动态替换。以下是实现此功能的具体步骤：

一、准备多语言JSON资源文件

每种语言的内容以独立的JSON文件形式组织，键名保持一致，仅值为对应语言的翻译文本。这种方式便于维护与扩展，且避免硬编码导致的耦合问题。

1、在项目根目录下创建文件夹。

2、在该文件夹中新建zh.json，写入中文键值对，例如：{"welcome": "欢迎使用", "submit": "提交"}。

立即学习“前端免费学习笔记（深入）”；

3、新建en.json，使用相同键名但填写英文翻译，例如：{"welcome": "Welcome to use", "submit": "Submit"}。

4、新建ja.json，填入日文翻译，确保所有键名完全一致。

二、HTML中定义可翻译元素并标记语言键

通过自定义属性（如data-i18n）标注需本地化的HTML元素，使JavaScript能精准识别并替换其内容，同时保留原有结构与语义。

1、在内添加一个按钮用于切换语言：中文English。

2、为待翻译文本添加data-i18n属性，例如：

欢迎使用

3、为表单控件的占位符或按钮文字也添加对应属性：。

三、使用JavaScript加载并应用对应语言包

通过fetch异步加载选定语言的JSON文件，并遍历DOM中所有带data-i18n属性的节点，将其文本内容或属性值替换为对应翻译。

1、声明全局变量currentLang = 'zh'记录当前激活语言。

2、编写函数loadLanguage(langCode)，使用fetch('./i18n/' + langCode + '.json')获取资源。

标签： javascript java html js json 编码 app 多语言 邮箱 本地化 异步加载 点击事件