jquery.cookie.jsを使い、状態を保存できるタブインターフェイスの作成です。

角丸タブインターフェイス

今回はためしに、角丸のタブインターフェイスで作成してみました。
ただし、FireFoxとSafari限定です。IEだと、ただの四角。。。

HTMLソース

<ul id="tab">
	<li><a href="#yahoo">Yahoo!</a></li>
	<li><a href="#google">Google</a></li>
	<li><a href="#bing">Bing</a></li>
</ul>

<div id="tabContents">
	<div id="yahoo">
		<p>Yahoo!（ヤフー）は、...</p>
	</div>
	<div id="google">
		<p>Google（グーグル）は、...</p>
	</div>
	<div id="bing">
		<p>Bing（ビング）とは、...</p>
	</div>
</div>

CSSソース

ul#tab {
	height: 2.3em;
}

ul#tab li {
	float: left;
}

ul#tab li a {
	display: block;
	margin: 0 5px 5px 0;
	padding: .5em 1em 1em;
	background: #000;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	color: #fff;
}

ul#tab li a.active {
	background: #ccc;
	color: #000;
}

#tabContents {
	position: relative;
	_margin-top: -10px;
	background: #fff;
	border: solid #ccc 1px;
	width: 100%;
}

#tabContents div {
	padding: 1em;
	background: #fff;
}

タブのクリック領域は広いほうがいいので、aをdisplay:blockにします。
paddingで領域を広げて背景に色をつけます。
そして、下記の記述を入れることで、角丸を実現出来ます。

-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

-moz-がMozilla、つまりFireFoxで、-webkit-はAppleのレンダリングエンジンなのでSafariです。
少し記述が違いますが、topのrightとleft、右上と左上を、radius、角丸にしています。
ちなみに、radiusは英語で「半径」の意味です。

Javascriptを記述、の前に。。。

前説が長くなりましたが、ここから本題のJavascriptソースです。
でもその前に、jquery.cookie.jsを使用するので、まずこちらをjquery.jsの次に読み込んで下さい。
一番下のファイルは今回作成するJavascriptですので、任意に変更してもらって大丈夫です。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="tab.js"></script>

Javascriptソース

読み込みが完了すれば、やっとJavascriptです。

$(function(){
	var Tabs = $("ul#tab li a");
	var TabActive = "active";
	var TabContents = $("div#tabContents");
	$("div" , TabContents).hide();

	$(Tabs).click(function(e){
		e.preventDefault();
		$("div" , TabContents).hide();
		$($(this).attr("href")).fadeIn(300);
		$(Tabs).removeClass(TabActive);
		$(this).addClass(TabActive);
		$.cookie("contents", $(this).attr("href") , {expires: 7});
	});

	// クッキー読み込み
	var CookieName = $.cookie("contents");
	if (CookieName != null) {
		$(Tabs).removeClass(TabActive);
		$("a[href="+CookieName+"]").addClass(TabActive);
		$(CookieName).fadeIn(300);
	} else {
		$("#tab li a:first").addClass(TabActive);
		$("div:first" , TabContents).fadeIn(300);
	}
});

Javascriptの解説

2-4行目:変数の設定

var Tabs = $("ul#tab li a");
var TabActive = "active";
var TabContents = $("div#tabContents");

通常と違うのは”active”が$()で囲まれていないこと。
これはaタグにactiveをaddClass、removeClassで操作するため、文字列にしています。

5行目:タブのコンテンツ要素の表示を操作

$("div" , TabContents).hide();

hide()でタブのコンテンツ要素を非表示にしています。

7-14行目:クリックイベントの処理

$(Tabs).click(function(e){
	e.preventDefault();
	$("div" , TabContents).hide();
	$($(this).attr("href")).fadeIn(300);
	$(Tabs).removeClass(TabActive);
	$(this).addClass(TabActive);
	$.cookie("contents", $(this).attr("href") , {expires: 7});
});

変数Tabsをクリックした際のイベント処理を設定します。
e.preventDefault();を指定することで、通常のaタグのページ繊維を無効にします。
ちなみにeはfunction(e)のからきています。

ここからが一番肝心な処理になります。
$(“div” , TabContents).hide();
$($(this).attr(“href”)).fadeIn(300);
上段の記述でコンテンツ要素を全て非表示にします。
次に、クリックしたaタグのhrefの値を取得し$()で囲んでid名にしています。
この方法はクリックイベントの最初のほうでも使用した方法です。

$(Tabs).removeClass(TabActive);
$(this).addClass(TabActive);
変数Tabsの要素から変数TabActiveをremoveClassで取り除いています。
次に、クリックされた要素のみに変数TabActiveをaddClassで挿入しています。

最後にcookieの処理です。
$.cookie(“contents”, $(this).attr(“href”) , {expires: 7});
この記述の意味は簡単に言うと、
「$(this).attr(“href”)をcookieに7日間保存する」
になります。
では”contents”は何かといいますと、保存したcookieを呼び出すための、クッキー名になります。

17-25行目:cookieの設定

var CookieName = $.cookie("contents");
if (CookieName != null) {
	$(Tabs).removeClass(TabActive);
	$("a[href="+CookieName+"]").addClass(TabActive);
	$(CookieName).fadeIn(300);
} else {
	$("#tab li a:first").addClass(TabActive);
	$("div:first" , TabContents).fadeIn(300);
}

var CookieName = $.cookie(“contents”);
変数CookieNameにクッキー名を代入しています。
このクッキー名にはクリックイベントで取得したid名が保存されています。

if (CookieName != null) {
次にif文で、クッキー名がnullでない場合の処理を指定します。
「!=」はイコールでない場合を表します。

$(“a[href=”+CookieName+”]”).addClass(TabActive);
これは取得したクッキー名と同じ文字列があるaタグのhrefに変数TabActiveのクラス名を挿入します。
これで、ロールオーバーされた状態になります。

そしてelse文には、cookieが保存されていない状態、つまり初期状態の記述をします。
:firstなので、最初の要素を表示させる設定にしています。

サンプル

今回はcookieが入ってソースが長くなっているが、処理事態はすごく単純だと思います。
サンプルはこちら

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryで作るタブ + cookieでその状態を保存