GHWEB06.GRASSHOPPER

$(function(){
$("#moji li").click(function () {
var no = $(this).parent().children().index(this);
switch (no){
case 0:
$("#contents").css("font-size", + 0.75 + "em");
break;
case 1:
$("#contents").css("font-size", + 1 + "em");
break;
case 2:
$("#contents").css("font-size", + 1.2 + "em");
break;
}
});
});

サンプル１

//#moji li がクリックされると {   } の中を実行
$("#moji li").click(function () {

//クリックされたli要素が何番目かを調べて変数「no」に代入
var no = $(this).parent().children().index(this);

//switch文で変数「no」の結果と他の値が一致するか調べる
switch (no){

//no が 0 （小をクリック）の場合
case 0:
//#contents に フォントサイズ 0.75em を指定
$("#contents").css("font-size", + 0.75 + "em");
break;

//no が 1 （中をクリック）の場合
case 1:
//#contents に フォントサイズ 1em を指定
$("#contents").css("font-size", + 1 + "em");
break;

//no が 2 （大をクリック）の場合
case 2:
//#contents に フォントサイズ 1.2em を指定
$("#contents").css("font-size", + 1.2 + "em");
break;
}

この方法で文字サイズの変更は可能ですが、画面遷移や再読込みをするとフォントサイズが元サイズに戻ってしまいます。次のサンプルではその辺を解消してみます。

プラグイン jquery.cookie.js を利用してcookieを使えるようにします。
まずは、HTMLのヘッダに jquery.cookie.js の記述を追加。
スクリプトは以下のようにcookieの読込みと保存の記述を追加しています。
サンプルページで再読込等をして試してみて下さい。

$(function(){
var newSize = $.cookie("fsize");
if ( newSize == null ){
var nowSize = 1;
} else { var nowSize = Number( newSize );
}
$("#contents").css("font-size", + nowSize + "em");
$("#moji li").click(function () {
var no = $(this).parent().children().index(this);
switch (no){
case 0:
$("#contents").css("font-size", + 0.75 + "em");
$.cookie("fsize",0.75,{expires:1,path:'/'});
break;
case 1:
$("#contents").css("font-size", + 1 + "em");
$.cookie("fsize",null,{path:'/'});
break;
case 2:
$("#contents").css("font-size", + 1.2 + "em");
$.cookie("fsize",1.2,{expires:1,path:'/'});
break;
}
});
});

サンプル２

スクリプトの処理内容

// cookie fsizeの読込んで変数 newSize に代入
var newSize = $.cookie("fsize");

//変数 newSize が null なら
if ( newSize == null ){
// nowSize に 1 を代入
var nowSize = 1;
//nullと違うなら 変数 newSize を nowSize に代入
} else { var nowSize = Number( newSize );
}

///#contents に フォントサイズ nowSize を指定
$("#contents").css("font-size", + nowSize + "em");

//#moji li がクリックされた時の処理
$("#moji li").click(function () {

//クリックされたli要素が何番目かを調べて変数「no」に代入
var no = $(this).parent().children().index(this);

//switch文で変数「no」の結果と他の値が一致するか調べます
switch (no){

//no が 0（小をクリック）の場合
case 0:
//#contents に フォントサイズ 0.75em を指定
$("#contents").css("font-size", + 0.75 + "em");
//cookie「fsize」に「0.75」をセットして1日保存。
$.cookie("fsize",0.75,{expires:1,path:'/'});
break;

//no が 1（中をクリック）の場合
case 1:
//#contents に フォントサイズ 1em を指定
$("#contents").css("font-size", + 1 + "em");
//cookieの削除
$.cookie("fsize",null,{path:'/'});
//↑でcookieが削除されない場合はこちらで削除
//$.cookie("fsize",null,{expires:-1,path:'/'});
break;

//no が 2（大をクリック）の場合
case 2:
//#contents に フォントサイズ 1.2em を指定
$("#contents").css("font-size", + 1.2 + "em");
//cookie「fsize」に「1.2」をセットして1日保存。
$.cookie("fsize",1.2,{expires:1,path:'/'});
break;