Easy SEO-friendly Language Switcher With jQuery - simple-multi-lang.js

simple-multi-lang.js is a simple, lightweight, SEO-friendly language switcher jQuery plugin for multilingual websites.

How to use it:

1. Define the multi-language translation of phrases in the lang attribute.

<span lang="en">Hello world!</span>
<span lang="fr">Bonjour le monde!</span>
<span lang="cn">你好，世界！</span>

2. Set the default language by hidding the other languages in the CSS.

span[lang="fr"], span[lang="cn"] {
  display: none;
}

3. Include the JavaScript jquery-simple-multi-lang.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery-simple-multi-lang.js"></script>

4. Create controls to switch between languages using the languageSwitcher method.

<!-- Buttons -->
<button onclick="$('span[lang]').languageSwitcher('en')">English</button>
<button onclick="$('span[lang]').languageSwitcher('fr')">French</button>
<button onclick="$('span[lang]').languageSwitcher('cn')">Chinese</button>

<!-- Links -->
<a href="#" onclick="$('span[lang]').languageSwitcher('en')">English</a> 
<a href="#" onclick="$('span[lang]').languageSwitcher('fr')">French</a> 
<a href="#" onclick="$('span[lang]').languageSwitcher('cn')">Chinese</a> 

5. Or using radio buttons to swtich between languages.

<input type="radio" id="en" name="lang" checked><label for="en">English</label>
<input type="radio" id="fr" name="lang"><label for="fr">French</label>
<input type="radio" id="cn" name="lang"><label for="cn">Chinese</label>

$("input[type=radio]").change(function() {
  $("span[lang]").languageSwitcher( $(this).attr("id") );
});

---

This awesome jQuery plugin is developed by zhangchengx. For more Advanced Usages, please check the demo page or visit the official website.