今回は、JavaScriptとCookieを使ってサイトの言語を切り替える方法を紹介します。
HTML
<html>
<a id="ja">日本語</a>
<a id="en">English</a>
<div class="ja">
<p>日本語コンテンツ</p>
</div>
<div class="ja">
<p>English content</p>
</div>
</html>
JavaScript
$(function(){
//言語選択ボタンを監視
$("#ja").click(function(){
document.cookie = "lang=ja";
location.reload();
})
$("#en").click(function(){
document.cookie = "lang=en";
location.reload();
})
//Cookieの言語データを読み出して選ばれていない言語を非表示にする
lang="ja"
var cookiedata = document.cookie;
var cookiesArray = cookiedata.split(';');
for(var c of cookiesArray){
var cArray = c.split('=');
if( cArray[0] == 'lang'){
if( cArray[1] == "ja"){
lang="ja"
}
if( cArray[1] == "en"){
lang="en"
}
}
}
if(lang=="ja"){
$(".ja").show()
$(".en").hide()
}
if(lang=="en"){
$(".ja").hide()
$(".en").show()
}
})
この方法ではjqueryを使用しているため予め読み込んでおいてください。
aタグで書かれている言語ボタンを押すことでJSがCookieに言語情報を書き込んでいます。
リンク
ビスケットを送る0
コメント