用Jquery和Json實現多語言切換 · 前端開發

用Jquery和Json實現多語言切換： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用Jquery和Json實現多語言切換</title> <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript"> var arrLang = { 'en': { 'home': 'Home', 'about': 'About', 'contact': 'Contacts', 'content': 'This is content' }, 'zh': { 'home': '首頁', 'about': '關于', 'contact': '聯系', 'content': '這是內容' } }; // Process translation $(function() { $('.translate').click(function() { var lang = $(this).attr('id'); $('.lang').each(function(index, item) { $(this).text(arrLang[lang][$(this).attr('key')]); }); }); }); </script> </head> <body> <button id="zh" class="translate">中文</button> <button id="en" class="translate">English</button> <ul> <li class="lang" key="home">首頁</li> <li class="lang" key="about">關于</li> <li class="lang" key="contact">聯系</li> </ul> <p class="lang" key="content">這是內容</p> </body> </html> ```