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>