---
description: >-
  https://www.semicolonworld.com/question/5357/build-multiple-language-website-using-jquery-and-json-based-methods
---

# \[MultiLang] Build multiple language website using jQuery and JSON based methods (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MZcy-NzpPZP81qd4PyP%2F-MZd06Qzd23dWUJzl-N8%2FScreenshot_3.jpg?alt=media\&token=4b22dccd-c986-4410-a45c-1e4a774a25a9)

C:\xampp\htdocs\windows\index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Latest compiled and minified CSS & JS -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <title>Document</title>
</head>
<body>
  <button class="translate" id="en-gb">English</button>
  <button class="translate" id="zh-tw">Chinese</button>
  <ul>
    <li class="lang" key="HOME"></li>
    <li class="lang" key="ABOUT"></li>
    <li class="lang" key="CONTACT"></li>
  </ul>
  <script type="text/javascript">
  var arrLang = {
    "en-gb": {
      "HOME": "Home",
      "ABOUT": "About Us",
      "CONTACT": "Contact Us",
    },
    "zh-tw": {
      "HOME": "首頁",
      "ABOUT": "關於我們",
      "CONTACT": "聯絡我們",
    }
  };
  $(document).ready(function() {
    // The default language is English
    var lang = "en-gb";
    $(".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");
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
  </script>
</body>
</html>
```
