HTML界面多语言切换

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 keyif('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>

HTML界面多语言切换相关推荐

WinForm 程序的界面多语言切换
下面介绍一种只需对现有代码做较小改动的方法. 在 Visual Studio 的设计视图中,如果在 Properties 窗口中改变了程序的默认界面语言(Language),我们会注意到无论是工程还是 ...
java界面多语言切换
前言使用ResourceBundle和properties文件完成中英文切换在src下创建文件 language_en.properties properites文件格式为ISO-8859-1,可 ...
Qt+C++窗体界面中英文多语言切换
程序示例精选 Qt+C++窗体界面中英文语言切换如需安装运行环境或远程调试,见文章底部个人微信名片,由专业技术人员远程协助! 前言这篇博客针对<<Qt+C++窗体界面中英文语言切换& ...
Android开发应用内多国语言切换
看到微信可以切换语言,切换语言也就是app国际化问题.我们也都会想到通过改变系统的语言,让app是自己跟随系统走,但是每一台手机系统设置中支持选择的语言,就比较少,比如小米2a:就只有简体中文,繁体 ...
iOS 程序内语言切换 -- 中英文切换
随着时代的发展,应用程序相继出现了不同语言的版本方案,中文,英文,法文,韩文等等:想在应用程序中实现语言的自由切换,需要配置多个语言的文件,根据用户的动态选择获取不同语言文件下的语言文件,从而显示到界 ...
android 系统语言切换,Android系统切换语言更新应用界面方法
最近做的一个升级应用,在下载升级包的过程中又有一个toast类型的dialog悬浮在屏幕右上角,这个时候切换系统语言会出现问题. 当主屏幕为升级应用时,切换系统语言升级应用重启,而重启后并不能自动断点 ...
Winform界面实现控件中英文语言切换
一.业务需求在Winform项目的开发过程中,涉及到一个基础的功能就是需要对界面中的显示语言内容可以进行选择切换,方便不同地区的使用者快速上手使用:效果如下: 二.需求分析需要实现对Winform ...
qml中loader加载页面会闪屏_Qml动态语言切换
此方法需要在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现重要的事情说三遍首先在工程文件.pro中加入TRANSLATIONS = zh_CN.ts ...
WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换
WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换独立观察员 2021 年 8 月 23 日我们平常在 WPF 中进行资源绑定操作,一般就是用 Stat ...

HTML界面多语言切换

HTML

JS

HTML界面多语言切换相关推荐

最新文章

热门文章