如何用纯html、js、jQuery构建多语种网站？-前端问题

how to build multiple language website using pure html, js, jquery?(如何用纯html、js、jQuery构建多语种网站？)

本文介绍了如何用纯html、js、jQuery构建多语种网站？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用html构建页面。问题是如何建立多语言切换？语言翻译不是问题，我有条件。然而，我不知道如何通过菜单栏上的语言按钮/下拉列表切换每一页的btw？如果有现有的例子或模板，那就更好了。提前谢谢。

推荐答案

好的。作为对我的答案的编辑，请遵循：

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页面，并放置两个链接以选择指向步骤3中列出的js函数的语言。

<a href="#" onclick="setLanguage('en')">English</a> 
<a href="#" onclick="setLanguage('es')">Spanish</a>

<div id="div1"></div>

3-创建两个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>

我相信这回答了这个问题，因为我在多个站点实现了相同的概念。

注意：只需使用一个onClick事件，而不是JQuery中的Document.Ready，就可以进行即时翻译(无需重载)。这取决于您的情景。

这篇关于如何用纯html、js、jQuery构建多语种网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！