Web Design Leaves

日本語と英語の2ヶ国語のサイトを作成し、それぞれの言語のページが全く同じ構成の場合、言語のリンクをクリックするとそのページに対応する言語のページに移動するリンクを作成する例。

• 言語のリンクは、p 要素と a 要素で作成。
• JavaScript が OFF の場合は、それぞれのトップページへ a 要素でリンク
• ディレクトリの構造は「en」フォルダの中に英語のページ、「jp」フォルダの中に日本語のページを作成
• 英語のページは「en」フォルダにあるので URL は「/en/xxxx.html」のようになる
• 日本語のページは「jp」フォルダにあるので URL は「/jp/xxxx.html」のようになる
• window.location.href で現在のページの URL を取得
• URL に「/jp/」が含まれていれば、リンクの href 属性の値を「/en/」に変換したものに置き換える

言語のリンクの HTML の記述

<p id="language"><a href="../index.html">英語</a></p>

jQuery の記述

jQuery(function($){ 
  url = window.location.href;
  if(url.search(/\/jp\//) !== -1) {
    langUrl = url.replace('/jp/', '/en/');
    $('p#language a').attr('href', langUrl);
  }else if(url.search(/\/en\//) !== -1) {
    langUrl = url.replace('/en/', '/jp/');
    $('p#language a').attr('href', langUrl);
  }
});