CSSおよびJavaScriptで言語切り替え

 
<div id="langChenge">
  <input type="radio" name="land" id="langJa" checked>
  <input type="radio" name="land" id="langEn">
  <input type="radio" name="land" id="langZh">
 
  <label for="langJa">
    <span lang="ja">日本語</span>
    <span lang="en">Japanese</span>
    <span lang="zh">日本</span>
  </label>
  <label for="langEn">
    <span lang="ja">英語</span>
    <span lang="en">English</span>
    <span lang="zh">英语</span>
  </label>
  <label for="langZh">
     <span lang="ja">中国語</span>
     <span lang="en">Chinese</span>
     <span lang="zh">中文</span>
  </label>
 
  <div>
    <p lang="ja">言語の切り替えはCSSのセレクタを使用します。</p>
    <p lang="en">Language switching uses CSS selector.</p>
    <p lang="zh">语言切换使用CSS选择器。</p>
    <p lang="ja">サンプルは日本語と英語の切り替えを行っています。</p>
    <p lang="en">The sample is switching between Japanese and English.</p>
    <p lang="zh">样本正在日语和英语之间切换。</p>
  </div>
 
</div>
 

 
<div id="sample1">
  <input type="radio" name="langKbn" id="sJa" onClick="langSet('ja')" checked>
  <label for="sJa">
    <span class="langCng" lang="ja">日本語</span>
    <span class="langCng" lang="en">Japanese</span>
    <span class="langCng" lang="zh">日本</span>
  </label>
 
  <input type="radio" name="langKbn" id="sEn" onClick="langSet('en')">
  <label for="sEn">
    <span class="langCng" lang="ja">英語</span>
    <span class="langCng" lang="en">English</span>
    <span class="langCng" lang="zh">英语</span>
  </label>
 
  <input type="radio" name="langKbn" id="sZh" onClick="langSet('zh')">
  <label for="sZh">
    <span class="langCng" lang="ja">中国語</span>
    <span class="langCng" lang="en">Chinese</span>
    <span class="langCng" lang="zh">中文</span>
  </label>
 
  <div>
    <p class="langCng" lang="ja">言語の切り替えはCSSのセレクタを使用します。</p>
    <p class="langCng" lang="en">Language switching uses CSS selector.</p>
    <p class="langCng" lang="zh">语言切换使用CSS选择器。</p>
 
    <p class="langCng" lang="ja">サンプルは日本語と英語の切り替えを行っています。</p>
    <p class="langCng" lang="en">The sample is switching between Japanese and English.</p>
    <p class="langCng" lang="zh">样本正在日语和英语之间切换。</p>
  </div>
</div>
 

<style type="text/css">
 /* === ラジオボタンは非表示 ================== */
#sample1 input[type="radio"]{
  display    : none;
}
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
#sample1 label{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  padding    : 2px 6px;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#sample1 input[type="radio"]:checked + label {
  background : #ffa64d;
}
</style>

<script>
 // =========================================================
 //      画面が開かれたときの初期設定
 // =========================================================
window.onload = function() {
 
  // --- ブラウザのデフォルト言語を取得して初回の表示 ----- 
  var wDef = (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
  langSet(wDef);
 
}
 // =========================================================
 //      選択された言語のみ表示
 // =========================================================
function langSet(argLang){
 
  // --- 切り替え対象のclass一覧を取得 ----------------------
  var elm = document.getElementsByClassName("langCng");
 
  for (var i = 0; i < elm.length; i++) {
 
    // --- 選択された言語と一致は表示、その他は非表示 -------
    if(elm[i].getAttribute("lang") == argLang){
      elm[i].style.display = '';
    }
    else{
      elm[i].style.display = 'none';
    }
  }
}
</style>