latup熊本でホームページ制作をしている人のメモ

簡単なjQueryのタブ切替サンプル

2009年 5月 4日 (月) / PM 11:06

ホームページ制作でタブやアコーディオンなどを設置する事があるのですが、そういうケースではjQueryが便利です。

昨日の簡単なアコーディオン処理のサンプルに続いて簡単なタブ切替処理のサンプルを作ってみました。

以下、サンプルの解説。

今回もjQueryはGoogleからもらい、jQueryの処理は外部ファイルとしてまとめます。
全体は実際のサンプルページのHTMLソースを参考して下さい。

<div id="tab">
    <ul id="nav">
        <li>タブ１</li>
        <li>タブ２</li>
        <li>タブ３</li>
        <li>タブ４</li>
        <li>タブ５</li>
    </ul>
    <div>タブ１の内容物</div>
    <div>タブ２の内容物</div>
    <div>タブ３の内容物</div>
    <div>タブ４の内容物</div>
    <div>タブ５の内容物</div>
</div>

HTML部分は非常に単純です。
次にjQuery部分の処理は以下の通り。

$(document).ready(function(){

	// 初期設定

		// #nav直下の全li要素の中から最初のli要素に.selectを追加
		$("#nav > li:first").addClass("select");
		// #nav直下の全li要素にマウスオーバーしたらリンク要素に偽装
		$("#nav > li").hover(function(){
			$(this).css("cursor","pointer");
		},function(){
			$(this).css("cursor","default");
		});

		// #tab直下の全div要素を非表示
		$("#tab > div").hide();
		// #tab直下の全div要素の中から最初のdiv要素を表示
		$("#tab > div:first").show();

	// タブ切替処理
	$("#nav > li").click(function () {
		// #nav直下の全li要素のclass属性を削除
		$("#nav > li").removeClass("select");
		// クリックしたli要素に.selectを追加
		$(this).addClass("select");
		// #tab直下の全div要素を非表示
		$("#tab > div").hide();
		// クリックしたタブのインデックス番号と同じdiv要素をフェード表示
		$("#tab > div").eq($("#nav > li").index(this)).fadeIn();
	});

});

最後の処理がちょっと難しいかなぁ

タグ: jQuery