How do I change the language of my whole website and not just the page I'm on?

tortellini 0
Viewed 14

I'm working on a website and I've decided to make it multilanguage.

By default all of the texts and links are in french and the others texts are hidden. When you click on "ENG" the french text is hidden and the english text becomes visible, same for chinese.

The problem is that it works only the page you're on. If you go to another page the text will be in french again. What can I do so that when I change the language it changes the language of the whole site ?

       <nav id="mainnav">
            <a href="index.html" class="fr">Accueil</a> 
            <a href="nosproduits.html"  class="fr">Nos produits</a>
            <a href="apropos.html" class="fr">&#192; propos</a>
            <a href="contact.html" class="fr">Contact</a>
 
            <a href="index.html" class="eng">Home</a> 
            <a href="nosproduits.html"  class="eng">Our products</a>
            <a href="apropos.html" class="eng">About</a>
            <a href="contact.html" class="eng">Contact</a>
 
            <a href="index.html" class="zh">首页</a> 
            <a href="nosproduits.html"  class="zh">我们的食品</a>
            <a href="apropos.html" class="zh">关于我们</a>
            <a href="contact.html" class="zh">联络我们</a>
         </nav>

        <div id="navright">
            <span id="french">FR</span>
            <span id="english">ENG</span>
            <span id="chinese">中文</span>
        </div>

.eng {
    display: none;
}

JQuery

$(document).ready(function(){

    $("#chinese").click(function(){
        $(".eng").hide();
        $(".fr").hide();
        $(".zh").show();
    })

    $("#english").click(function(){
        $(".eng").show();
        $(".fr").hide();
        $(".zh").hide();
    })

    $("#french").click(function(){
        $(".eng").hide();
        $(".fr").show();
        $(".zh").hide();
    })
})
jquery html
1 Answers

Demo Link

I did Enhance your code to use local storage, if you change language and refresh a page or go to another page it will be saved

  $(document).ready(function () {

      let lang = localStorage.getItem("my_lang") || 'fr';

      const change_lang = (lang) => {
          $(".eng, .fr, .zh").hide();
          $("." + lang).show();
          localStorage.setItem("my_lang", lang);
      }

      change_lang(lang);

      $("#chinese").click(function () {
          change_lang('zh');
      });

      $("#english").click(function () {
          change_lang('eng');
      });

      $("#french").click(function () {
          change_lang('fr');
      });

  });
.fr {
    display: none;
}
.eng {
    display: none;
}
.zh {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="mainnav">
    <a href="index.html" class="fr">Accueil</a> 
    <a href="nosproduits.html"  class="fr">Nos produits</a>
    <a href="apropos.html" class="fr">&#192; propos</a>
    <a href="contact.html" class="fr">Contact</a>

    <a href="index.html" class="eng">Home</a> 
    <a href="nosproduits.html"  class="eng">Our products</a>
    <a href="apropos.html" class="eng">About</a>
    <a href="contact.html" class="eng">Contact</a>

    <a href="index.html" class="zh">首页</a> 
    <a href="nosproduits.html"  class="zh">我们的食品</a>
    <a href="apropos.html" class="zh">关于我们</a>
    <a href="contact.html" class="zh">联络我们</a>
 </nav>
<br>
<br>
<div id="navright">
    <span id="french">FR</span>
    <span id="english">ENG</span>
    <span id="chinese">中文</span>
</div>

Abdo-Host0
Related