我在做个人网站时考虑到多语言转换的问题,最后在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. 为了约会,PM的领导能力篇来啦!

    之前我们花了很大力气阐述PM的过程能力成熟度,为的是让PM把项目管理得心应手,早点下班.可再完美的过程也要人来做啊!兄弟们要是不爽了,你还有心思约会么?那怎么才能管好组里的兄弟,让他们好好执行过程,早 ...

  2. MyDAL - .Where() 之 .WhereSegment 根据条件 动态设置 Select查询条件 使用

    索引: 目录索引 一.API 列表 1.WhereSegment 属性,指示 根据条件 动态拼接 where 查询过滤条件 见如下示例. 二.API 单表-完整 方法 举例 // 上下文条件 变量 v ...

  3. C#事件与委托详解

    from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...

  4. HTML+Css让网页自动适应电脑手机屏幕

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  5. golang 使用匿名结构体的问题

    golang允许使用匿名结构体,形如 type Test struct { param1 struct { param2 string } } 一般在使用的时候可以直接这样初始化 a := Test{ ...

  6. linux系统mysql-5.7 修改字符集

    起因:我在网上看修改mysql字符的文章时,都说配置/etc/mysql/my.cnf文件 然而我打开我上述的my.cnf文件时,发现里面的内容跟别人的不一样,我就觉得这个肯定不是正确的文件 经过我在 ...

  7. 逆向-攻防世界-no-strings-attached

    看题目就知道查找不到关键字符串,为防止踩坑,strings命令查看,没有找到有用的字符串.IDA载入程序查找入口函数, main函数中有4个函数,经过分析判断authenticate()为关键函数,跟 ...

  8. 8年,从2D到3D,我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. 08 Django REST Framework 解决前后端分离项目中的跨域问题

    01-安装模块 pip install django-cors-headers 02-添加到INSTALL_APPS中 INSTALLED_APPS = ( ... 'corsheaders', .. ...

  10. Element-UI动态更换主题

    参考:vue-基于elementui换肤[自定义主题] 实践: 需求1.后期维护主题色不更换:  直接在线主题生成工具下载,在APP.VUE引入:(注意Element UI 版本1.3?2.0) 需求 ...