我在做个人网站时考虑到多语言转换的问题,最后在JS文件中将所有文字数据储存然后设置HTML中的class与key属性来达到多语言效果。当然,还有一个别的方法,就是所有有文字内容的div都用不同语言写一遍然后加上相应的class,再利用CSS隐藏或显现相应的内容。本文只介绍第一种方法。(对制作个人网站感兴趣的可以查看我的前一篇博客《利用GitHub Pages和Bootstrap创建个人网站》。)

首先附上一个JSFiddle的效果展示链接:https://jsfiddle.net/20zo4wg8/4/

能看Youtube的可以看这个教程视频:https://www.youtube.com/watch?v=Tjt_u_OSh40

HTML

你需要将所有想要翻译的模块部分的class中加上lang,然后自定义key。还需要有设置语言的按钮,class中添加translate,id用相应的代号。

<button class="translate" id="en">English</button>
<button class="translate" id="zh">Chinese</button> <ul>
<li class="lang" key="HOME"></li>
<li class="lang" key="ABOUT"></li>
<li class="lang" key="CONTACT"></li>
</ul>

JS

以下操作会自动检测浏览器设置的语言,首次访问时会使用该语言(该例子中只有英语或中文),如果浏览器设置的语言不是英语或中文,则默认为英语,然后会保存网页的语言在浏览器中,这样下次用户再访问你的网站时就会显示之前退出时设置的语言。

var arrLang = {
"en": {
"HOME": "Home",
"ABOUT": "About Us",
"CONTACT": "Contact Us",
},
"zh": {
"HOME": "首页",
"ABOUT": "关于我们",
"CONTACT": "联络我们",
}
}; // The default language is English
var lang = "en";
// Check for localStorage support
if('localStorage' in window){
var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
if (!Object.keys(arrLang).includes(lang)) lang = 'en';
} $(document).ready(function() {
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
}); // get/set the selected language
$(".translate").click(function() {
var lang = $(this).attr("id"); // update localStorage key
if('localStorage' in window){
localStorage.setItem('lang', lang);
console.log( localStorage.getItem('lang') );
} $(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});

因为JS文件中用到了jQuery,所以你需要下载它(http://jquery.com/download/)然后在HTML中引入,或者直接在HTML文件中添加以下代码。

<script src="jquery-3.3.1.min.js"></script>

其中的3.3.1为目前最新版本,你可以自行修改为最新版本号。

HTML界面多语言切换的更多相关文章

  1. c#: 界面多语言动态切换简单实现

    终于有空整理下多语言实现思路.查阅已有方案,有用不同resx文件的,有每个控件动态设置的,有用反射去整的,颇为繁琐. 结合项目中实现方法,并做简化,实现通用的多语言切换方案,以做备忘. 它支持语言自定 ...

  2. Android app应用多语言切换功能实现

    最近在做一个多语言切换的功能,类似于微信的语言切换,搜了下资料基本上都是以下这种: 1. 实现的效果 和微信类似,在设置界面打开切换语言的界面,选择语言后重启 HomeActivity,语言切换完成, ...

  3. QT实现多语言切换

    功能需求: 网盘客户端要能够实现多国语言的切换,第一版要支持中.英文的切换.在实现过程中感觉QT对多国语言的支持还是很不错的,制作多语言包很方便,切换的逻辑也很简单.下面就来看一下QT中如何制作多语言 ...

  4. 在使用Qt5.8完成程序动态语言切换时遇到的问题

    因为之前了解过一些Qt国际化的东西,所以在写程序的时候需要显示给用户的字符都使用了 tr(" ")的形式,然后使用 Qt Linguist得到相应的 qm(Qt message)文 ...

  5. 【大话QT之十四】QT实现多语言切换

    功能需求: 网盘client要可以实现多国语言的切换,第一版要支持中.英文的切换. 在实现过程中感觉QT对多国语言的支持还是非常不错的.制作多语言包非常方便.切换的逻辑也非常easy. 以下就来看一下 ...

  6. 【winfrom-多语言】实现多语言切换:使用资源文件

    使用资源文件实现多语言切换. 1. 新建一个Form,名为FrmMain. 在界面添加一个MenuStrip和一个Button. 并设置好控件的文本和位置.(Language=(Default)) 2 ...

  7. Delphi XE2 之 FireMonkey 入门(18) - TLang(多语言切换的实现)

    一个小小的 TLang 类, 实现多语言切换, 挺好的. 它的工作思路是: 1.首先通过 AddLang('语言代码') 添加语言类别, 如: AddLang('en').AddLang('cn'). ...

  8. Android原生多语言切换方案,兼容Android10

    前言 一个应用若需要国际化,至少需要支持中文和英语这两种语言,而同时随着谷歌的系统的更新,安卓系统可以设置当前语言的首选语言.因此,本文立足于此,多语言的切换方案为:App固定的文字内容,跟随系统,中 ...

  9. DataGrid 列头实现国际化语言切换

    <DataGrid> <DataGrid.Columns> <DataGridTextColumn Binding="{x:Null}" Width= ...

随机推荐

  1. Sql Server 完全卸载,卸载干净,Windows 7。

    一般卸载程序的卸载方法无法完全清除SqlServer 导致重装sqlserver报错,下面给大家介绍和讲解如何完全卸载Sql Server. (此教程使用的系统为Windows 7[Win10,Win ...

  2. EF 底层封装方法(供参考)

    闲暇之余,整理了一下EF底层的一些基础方法,供查看,只有接口,具体实现需要你们自己写了. 建议:接口的实现定义为虚方法,当父类的方法不满住子类需求时,可以重写此方法 此接口都为公用方法,基本上满足小系 ...

  3. 电脑开机后win系统运行异常慢,鼠标移动卡

    今天公司里面一个小伙伴的电脑开机后还没有打开应用程序系统就运行非常慢,打开文件夹反应慢,鼠标是一点一点的在移动.体验感极差.作为运维的我立即上去解决问题: 首先是查看一下电脑确实运行比较慢,然后就查看 ...

  4. (转)postman安装及简单使用

    Postman安装与使用 2018-06-04 22:58 by 虫师, 46636 阅读, 10 评论, 收藏, 编辑 Postman一款非常流行的API调试工具.其实,开发人员用的更多.因为测试人 ...

  5. P4015 运输问题 网络流问题

    题目描述 WW 公司有 mm 个仓库和 nn 个零售商店.第 ii 个仓库有 a_iai​ 个单位的货物:第 jj 个零售商店需要 b_jbj​ 个单位的货物. 货物供需平衡,即\sum\limits ...

  6. springMVC静态资源

    静态资源放在哪 静态资源不要放在WEB-INF里面,放在和WEB-INF同级的目录里,一起放在webapp下,原生tomcat中,这里的资源可以直接访问. springmvc配置怎么写 <!-- ...

  7. 毕业设计(3)基于MicroPython的篮球计时计分器模型的设计与实现

    前言 我们身边有不少人都喜欢看篮球比赛或者经常打篮球.说起篮球,肯定要提到NBA(美国职业篮球联赛),现在也正是NBA 18-19赛季常规赛的时候.最近3月5日,韦少22分帮助雷霆终结了四连败,哈登4 ...

  8. Elastic Stack-Elasticsearch使用介绍(三)

    一.前言     上一篇说了这篇要讲解Search机制,但是在这个之前我们要明白下文件是怎么存储的,我们先来讲文件的存储然后再来探究机制: 二.文档存储 之前说过文档是存储在分片上的,这里要思考一个问 ...

  9. C#类继承中构造函数的执行序列

    不知道大家在使用继承的过程中有木有遇到过调用构造函数时没有按照我们预期的那样执行呢?一般情况下,出现这样的问题往往是因为类继承结构中的某个基类没有被正确实例化,或者没有正确给基类构造函数提供信息,如果 ...

  10. HTML HTML5 新特性

    一.语义化标签 语义化标签 为页面提供了更好的页面结构. 描述 属性 <header></header>  定义文档的头部区域 <footer></foote ...