HTML界⾯多语⾔切换
我在做个⼈⽹站时考虑到多语⾔转换的问题，最后在JS⽂件中将所有⽂字数据储存然后设置HTML中的class与key属性来达到多语⾔效果。当然，还有⼀个别的⽅法，就是所有有⽂字内容的div都⽤不同语⾔写⼀遍然后加上相应的class，再利⽤CSS隐藏或显现相应的内容。本⽂只介绍第⼀种⽅法。（对制作个⼈⽹站感兴趣的可以查看我的前⼀篇博客《》。）
⾸先附上⼀个JSFiddle的效果展⽰链接：，
能看Youtube的可以看这个教程视频：，
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
jquery修改html内容var lang = "en";
// Check for localStorage support
if('localStorage' in window){
var lang = Item('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( Item('lang') );
}
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
因为JS⽂件中⽤到了jQuery，所以你需要下载它（）然后在HTML中引⼊，或者直接在HTML⽂件中添加以下代码。<script src="jquery-3.3.1.min.js"></script>
其中的3.3.1为⽬前最新版本，你可以⾃⾏修改为最新版本号。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。