読者です 読者をやめる 読者になる 読者になる

毎日がひとりオフ

ネットの話題とITと音楽。

簡易タブ切り替えのjQueryコード

汎用的かつ手軽なタブ切り替えが見つからなかったので、自分でjQueryのコードを書いてみました。
まともなjQueryコードを書くのは初めてなので、あまり美しくはないかと存じます。
あと、実際にコンテンツを消しているのではなく、クラスの切り替えのみ行っております。
そのため、ソースを開けばそのまま中身が出力されますので、あらかじめご了承ください。

<!-- XHTML タブ表示部分 -->
<div class="TabField">
	<ul class="TabIndex">
		<li>いぬ</li>
		<li>ねこ</li>
	</ul>

	<div class="TabContent">
		<h2 class="">いぬ</h2>
		<div>
			<p>わんわんドッグ</p>
		</div>
	</div>

	<div class="TabContent">
		<h2 class="tabtitle">ネコ</h2>
		<div>
			<p>にゃーにゃーキャット。</p>
		</div>
	</div>
</div>
/* cssファイル */
.TabIndex{
	clear:both;
}
.TabIndex li{
	border:1px solid black;
	float:left;
}
.TabContent{
	clear:both;
}


.EnableTabIndex{
	color:#FF9900;
}

.DisableTabIndex{
	color:#999999;
}


.EnableTab{
	display:block;
	height:15em;
	width:300px;
	overflow:auto;
}

.DisableTab{
	display:none;
}
// jQueryを事前に読み込んでおくこと。
// 1.2.6にて確認
// 2008-07-17 初版作成

$(function(){

	var conf = {
		// タブフィールド用クラス
		classTabField : 'TabField',
		// タブの見出し用ul
		classTabIndex : 'TabIndex',
		 //タブのコンテンツ領域用
		classTabContent : 'TabContent',

		//アクティブタブ見出し
		classEnableTabIndex : 'EnableTabIndex', 
		//アクティブタブ中身
		classEnableTabContent : 'EnableTab',
		//非表示タブ見出し
		classDisableTabIndex : 'DisableTabIndex',
		//非表示タブコンテンツ
		classDisableTabContent : 'DisableTab',
	};



	//TabFieldを取得
	$TabField = $('.' + conf.classTabField);

	//タブの初期設定
	//全タブ・見出しdisable
	$('.' + conf.classTabIndex + ' li',$TabField)
		.addClass(conf.classDisableTabIndex);
	$('.' + conf.classTabContent)
		.addClass(conf.classDisableTabContent);

	$TabField.each(function(i){
		$TabIndex = $("li",this);
		$TabContent = $("." + conf.classTabContent,this);

	//先頭タブ・見出しのEnable
	$($TabIndex[0])
		.addClass(conf.classEnableTabIndex)
		.removeClass(conf.classDisableTabIndex);

	//タブコンテンツの初期表示
	$($TabContent[0])
		.addClass(conf.classEnableTabContent)
		.removeClass(conf.classDisableTabContent);

	$("." + conf.classTabIndex + " li",this)
		.each(function(j){

			//見出しクリック時の処理
			$(this).click(function(){
				//全タブ見出しDisable
				$("."+conf.classTabIndex + " li",$TabField[i])
					.removeClass(conf.classEnableTabIndex)
					.addClass(conf.classDisableTabIndex);

				//クリックした見出しEnable
				$(this)
					.addClass(conf.classEnableTabIndex)
					.removeClass(conf.classDisableTabIndex);

				//表示するタブコンテンツの取得
				$CurrentContent = $("."+conf.classTabContent,$TabField[i]);

				//全タブ一旦非表示
				$("." + conf.classTabContent,$TabField[i])
					.addClass(conf.classDisableTabContent)
					.removeClass(conf.classEnableTabContent);

				//クリックしたタブのコンテンツ表示
				$($CurrentContent[j])
					.addClass(conf.classEnableTabContent)
					.removeClass(conf.classDisableTabContent);
				return false;
			});
		});
	});	
});