Mit Hilfe von Javascript die Sprache der Webseite ändern

Nichts für ungut an die anderen Beantworter, sondern speichern Sie den text in JavaScript-oder data-Attribute ist nicht gut für die Suchmaschinen oder deaktiviert Website-Besucher und bietet keine Vorteile, während Hinzugefügt unnötig komplizierten code. Die beste und einfachste Lösung meiner Meinung nach ist das verwenden von HTML-lang Attribut, und verwenden Sie JavaScript ein-und ausblenden der gewünschten Sprache. Auch diese Lösung, die anmutig abbaut, wenn also ein Website-Besucher hat JavaScript deaktiviert, es werden noch den Inhalt anzuzeigen. Hier ist meine Lösung:

HTML

<button id="switch-lang">Switch Language</button>

<h1><span lang="en">Hello</span> <span lang="es">Hola</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="es">Me gusta mucho la codificación.</p>

jQuery

$('[lang="es"]').hide();

$('#switch-lang').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

Dann würde ich empfehlen, hinzufügen von HTML5-Geolocation, um zu bestimmen, welche Sprache zu zeigen, zunächst auf der Grundlage der Benutzer-Standort in der Welt. Ich würde auch Fontawesome Symbol Sprache, um dem Benutzer anzuzeigen, können Sie die Sprache wechseln, in einer Weise, die verständlich für jedermann: http://fontawesome.io/icon/language/

Hier ist der funktionierende code-Beispiel auf CodePen: https://codepen.io/codepajamas/pen/ZejaQz?editors=1010

Hier ist ein weiteres Beispiel auf code-Stift mit einer select-Menü wechseln Sie zwischen 3
(oder mehr) Sprachen: https://codepen.io/codepajamas/pen/NjGOMV

Aktualisiert Vollständiges Beispiel mit Geolocation und Cookies

Habe ich mich sehr intensiv auf diese und erstellt eine aktualisierte Beispiel der Wechsel zwischen zwei Sprachen Chinesisch und Englisch (wenn Sie mehr als zwei Sprachen, die Sie haben würde, zu verstecken, alle Sprachen und es wird nur der ausgewählt ist anstatt toggle, so wie ich bin). Dieser code erkennt auch, wenn ein vorhandener cookie bereits gesetzt ist für die Sprache mit Hilfe von jQuery Cookie. Es wird auch überprüft, Ihre geolocation-wenn Ihr browser unterstützt es automatisch-Einstellung die Sprache auf Chinesisch, wenn Sie entweder in Taiwan oder China und standardmäßig auf Englisch in allen anderen Ländern. Der code ist kommentiert, so dass Sie sehen können, was jeder Schritt tut und hoffentlich in der Lage sein, um es zu ändern, um Ihre Bedürfnisse anzupassen. Hier ist es:

HTML

<button id="switch-lang">Switch Language Icon Here</button>

<h1><span lang="en">Hello</span> <span lang="zh">你好</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="zh">我真的很喜歡編碼。</p>

jQuery
Hinweis: dies erfordert die Verknüpfung nicht nur jQuery aber auch jQuery Cookie

$(function () {
  /////Language Switching (2 languages: English and Chinese). /////

  //Initially disable language switching button.
  $('#switch-lang').css({'pointer-events':'none',
   'cursor':'default'}).attr('disabled','disabled');

  function langButtonListen() {
    $('#switch-lang').click(function (event) {
      event.preventDefault();
      $('[lang="zh"]').toggle();
      $('[lang="en"]').toggle();
      //Switch cookie stored language.
      if ($.cookie('lang') === 'en') {
        $.cookie('lang', 'zh', { expires: 7 });
      } else {
        $.cookie('lang', 'en', { expires: 7 });
      }
    });
    //Enable lang switching button.
    $('#switch-lang').css({'pointer-events':'auto',
     'cursor':'pointer'}).removeAttr('disabled');
  }

  //Check if language cookie already exists.
  if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    if (lang === 'en') {
      $('[lang="zh"]').hide();
      langButtonListen();
    } else {
      $('[lang="en"]').hide();
      langButtonListen();
    }
  } else {
    //no cookie set, so detect language based on location.
    if ("geolocation" in navigator) {
      //geolocation is available
      navigator.geolocation.getCurrentPosition(function (position) {
        //accepted geolocation so figure out which country
        var lat = position.coords.latitude,
            lng = position.coords.longitude;
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=true', null, function (response) {
          var country = response.results[response.results.length-1].formatted_address;
          if (country ===  'Taiwan' || country === 'China') {
            $('[lang="en"]').hide();
            $.cookie('lang', 'zh', { expires: 7 });
            langButtonListen();
          } else {
            $('[lang="zh"]').hide();
            $.cookie('lang', 'en', { expires: 7 });
            langButtonListen();
          }
        }).fail(function (err) {
          console.log('error: '+err);
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        });
      },
      function (error) {
        if (error.code == error.PERMISSION_DENIED) {
          //denied geolocation
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        } else {
          console.log('Unknown error. Defaulting to English!');
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        }
      });
    } else {
      //geolocation IS NOT available
      $('[lang="zh"]').hide();
      $.cookie('lang', 'en', { expires: 7 });
      langButtonListen());
    }
  }
});

 <script type="text/javascript">

//Laden der Google-API-Umschrift
google.load("elements", "1", {
Pakete: "transliteration"
});

  var transliterationControl;
  function onLoad() {
    var options = {
        sourceLanguage: 'en',
        destinationLanguage: ['hi','or','bn','ta','te'],
        transliterationEnabled: true,
        shortcutKey: 'ctrl+g'
    };
    //Create an instance on TransliterationControl with the required
    //options.
    transliterationControl =
      new google.elements.transliteration.TransliterationControl(options);

    //Enable transliteration in the textfields with the given ids.
    var ids = [ "transl1", "transl2" ];
    transliterationControl.makeTransliteratable(ids);

    //Add the STATE_CHANGED event handler to correcly maintain the state
    //of the checkbox.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
        transliterateStateChangeHandler);

    //Add the SERVER_UNREACHABLE event handler to display an error message
    //if unable to reach the server.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
        serverUnreachableHandler);

    //Add the SERVER_REACHABLE event handler to remove the error message
    //once the server becomes reachable.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
        serverReachableHandler);

    //Set the checkbox to the correct state.
    document.getElementById('checkboxId').checked =
      transliterationControl.isTransliterationEnabled();

    //Populate the language dropdown
    var destinationLanguage =
      transliterationControl.getLanguagePair().destinationLanguage;
    var languageSelect = document.getElementById('languageDropDown');
    var supportedDestinationLanguages =
      google.elements.transliteration.getDestinationLanguages(
        google.elements.transliteration.LanguageCode.ENGLISH);
    for (var lang in supportedDestinationLanguages) {
      var opt = document.createElement('option');
      opt.text = lang;
if (lang=="TAMIL" || lang=="TELUGU" || lang=="HINDI" || lang=="ORIYA" || lang=="BENGALI"){
      opt.value = supportedDestinationLanguages[lang];
      if (destinationLanguage == opt.value) {
        opt.selected = true;
      }
      try {
        languageSelect.add(opt, null);
      } catch (ex) {
        languageSelect.add(opt);
      }
}//End of if
    }
  }

  //Handler for STATE_CHANGED event which makes sure checkbox status
  //reflects the transliteration enabled or disabled status.
  function transliterateStateChangeHandler(e) {
    document.getElementById('checkboxId').checked = e.transliterationEnabled;
  }

  //Handler for checkbox's click event.  Calls toggleTransliteration to toggle
  //the transliteration state.
  function checkboxClickHandler() {
    transliterationControl.toggleTransliteration();
  }

  //Handler for dropdown option change event.  Calls setLanguagePair to
  //set the new language.
  function languageChangeHandler() {
    var dropdown = document.getElementById('languageDropDown');
    transliterationControl.setLanguagePair(
        google.elements.transliteration.LanguageCode.ENGLISH,
        dropdown.options[dropdown.selectedIndex].value);
  }

  //SERVER_UNREACHABLE event handler which displays the error message.
  function serverUnreachableHandler(e) {
    document.getElementById("errorDiv").innerHTML =
        "Transliteration Server unreachable";
  }

  //SERVER_UNREACHABLE event handler which clears the error message.
  function serverReachableHandler(e) {
    document.getElementById("errorDiv").innerHTML = "";
  }
  google.setOnLoadCallback(onLoad);