生活随笔
收集整理的這篇文章主要介紹了
H5实现多语言
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
歡迎關注博主博客： https://lvsige.top/
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><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><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>var arrLang = {en: {HOME: 'Home',ABOUT: 'About Us',CONTACT: 'Contact Us',},zh: {HOME: '首頁',ABOUT: '關于我們',CONTACT: '聯絡我們',},}// The default language is Englishvar lang = 'en'// Check for localStorage supportif ('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')])})})</script></body>
</html>
總結
以上是生活随笔為你收集整理的H5实现多语言的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
