
要在网页上实现语言切换功能,通常需要使用一些前端技术来动态更改语言。以下是一种常见的实现方式:
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; // 修改文本}这两种方法都能帮助你实现基本的语言切换功能。根据你的需要,可以选择适合的方式。