HTML界面多语言切换

我在做个人网站时考虑到多语言转换的问题，最后在JS文件中将所有文字数据储存然后设置HTML中class与key来达到多语言效果。当然，还有一个别的方法，就是所有有文字内容的div都用不同文字写一遍然后加上相应的class，再利用CSS隐藏或显现相应的内容。本文只介绍第一种方法。

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

HTML

<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为目前最新版本，你可以自行修改为最新版本号。