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 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>