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

簡単なjQueryのタブ切替サンプル【複数版】

2010年 8月 23日 (月) / AM 11:46

簡単なアコーディオン処理の記事に「CSSもjsも（タブの）数を増やしても変更しなくていい」サンプルが無いかとコメントが来ていたので考えてみた。
簡単なタブ切替処理のサンプル【複数のタブに対応】

以下、サンプルの解説。

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

$(document).ready(function(){

	// 初期設定
		// #nav直下の全li要素の中から最初のli要素に.selectを追加
		$("#nav > li:first-child").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:nth-child(2)").show();

	// 複数のタブの場合の追加処理【追加した部分】
	$("#nav > li").hover(
		function () {
			// マウスオーバーしているli要素の親属性の親属性に.hoversを追加
			$(this).parent().parent().addClass("hovers");
		},
		function () {
			// マウスオーバー解除の時に.hoversを削除
			$(this).parent().parent().removeClass("hovers");
		}
	);

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

簡単に説明するとマウスオーバー状態のタブに対してのみ非表示等の処理を行うようになってます。

タグ: jQuery