要在网页上实现语言切换功能,通常需要使用一些前端技术来动态更改语言。以下是一种常见的实现方式:
html复制代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>语言切换示例</title></head><body> <h1 id="welcome">欢迎</h1> <button onclick="switchLanguage('en')">切换到英语</button> <button onclick="switchLanguage('zh')">切换到中文</button> <script src="script.js"></script></body></html>
script.js
)javascript复制代码function switchLanguage(lang) { const messages = { en: { welcome: 'Welcome' }, zh: { welcome: '欢迎' } }; document.documentElement.lang = lang; // 修改语言 document.getElementById('welcome').textContent = messages[lang].welcome; // 修改文本}
en.json
和 zh.json
)json复制代码// en.json{ "welcome": "Welcome"}// zh.json{ "welcome": "欢迎"}
html复制代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>语言切换示例</title></head><body> <h1 id="welcome">欢迎</h1> <button onclick="switchLanguage('en')">切换到英语</button> <button onclick="switchLanguage('zh')">切换到中文</button> <script src="script.js"></script></body></html>
script.js
)javascript复制代码async function switchLanguage(lang) { const response = await fetch(`${lang}.json`); const messages = await response.json(); document.documentElement.lang = lang; // 修改语言 document.getElementById('welcome').textContent = messages.welcome; // 修改文本}
这两种方法都能帮助你实现基本的语言切换功能。根据你的需要,可以选择适合的方式。