我正在使用 html 来构建页面。问题是如何构建多语言切换？语言翻译不是问题，我有条款。但是，我不知道如何通过菜单栏上的语言按钮/下拉列表切换每个页面？如果有现有的示例或模板，那就更好了。提前致谢。
【问题讨论】：
标签： javascript jquery html multilingual
好的。作为对我的回答的编辑，请关注：
1 - 创建一个名为 language 的文件夹并向其中添加 2 个文件（es.json 和 en.json）
json文件的结构应该相同，但翻译不同：
en.json
{
"date": "Date",
"save": "Save",
"cancel": "Cancel"
}
es.json
{
"date": "Fecha",
"save": "Salvar",
"cancel": "Cancelar"
}
2 - 创建一个包含示例 div 的 html 页面并放置 2 个链接以选择指向步骤 3 中列出的 js 函数的语言。
<a href="#" onclick="setLanguage('en')">English</a>
<a href="#" onclick="setLanguage('es')">Spanish</a>
<div id="div1"></div>
3 - 创建 2 个 java 脚本函数来获取/设置所选语言：
<script>
var language;
function getLanguage() {
(localStorage.getItem('language') == null) ? setLanguage('en') : false;
$.ajax({
url: '/language/' + localStorage.getItem('language') + '.json',
dataType: 'json', async: false, dataType: 'json',
success: function (lang) { language = lang } });
}
function setLanguage(lang) {
localStorage.setItem('language', lang);
}
</script>
4 - 使用可变语言填充文本。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#div1').text(language.date);
});
</script>
我相信这回答了这个问题，因为我已经跨多个站点实施了相同的概念。
注意：您可以使用除了来自 JQuery 的 document.ready 之外的 onclick 事件进行即时翻译（无需重新加载）。这取决于你的场景。
【讨论】：
由于您是前端新手，因此我想为您提供一个工作模板/示例，该模板/示例是使用iframes 以两种不同语言模拟页面的非常基本的尝试。这至少会给你一个关于如何做到这一点的替代方法的想法，至少在 M. Taha 完成他对提供多语言 UI 的通用前端框架的工作之前。
假设this 和this 分别是您的英文版和法文版页面，您可以这样做（小提琴here）：
<html>
<body>
<select id="langselector" onchange="loadlang()">
<option value="en">English</option>
<option value="fr">French</option>
</select>
<p></p>
<iframe id="contents" src="https://jsfiddle.net/q2nw8o35/" width="1366" height="768" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
function loadlang()
{
var lng = document.getElementById("langselector").value;
var cnt = document.getElementById("contents");
switch (lng)
{
case "en":
cnt.src = "https://jsfiddle.net/q2nw8o35/";
break;
case "fr":
cnt.src = "https://jsfiddle.net/jmn8c9tj/";
break;
}
}
</script>
</body>
</html>
现在，如果您构建页面的版本并将src-s 的值替换为服务器上指向您的页面版本的路径，您就可以实现它，所有这些都在iframe 中。通过一些试验（在 JSFiddle 上玩，这很有趣）并且可能会有所帮助，您可以从那里取得进展，并寻找正确的方式，就像 M.Taha 正在尝试的那样（例如，更详细的 JSON 文件，使用本地存储 / cookie 以“记住”您之前的设置等）。
我的示例并非旨在提供最终框架等，但它应该更像是一个非常基本的工作示例，可以暂时实现您想要的，或者直到提供更好的解决方案/答案。
【讨论】：