jQuery タブ（横）シンプル版

過去に作ったタブのサンプルから、コードをよりシンプルに改変しました。

スタンダードなタブメニューですが、作るとなると意外と面倒です。

でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください。

タブ

シンプル

スムーズ

拡張性

過去に作ったサンプルより

ソースをシンプルに

滑らかな動きで

数が増えても大丈夫

アクティブなボタンの前後にclassを追加して、少しだけ飾りっ気をつけています。

JSのコードはこちら

$(document).ready(function(){
	//タブよりボディが小さくならように
	i = $('#demo_tab div').length;
	w = $('#demo_tab div').width();
	$('#demo_body div').css('min-width',i*w);

	//メインのタブの左右に別クラスをつけてみる
	$('#demo_tab div.act').prev().addClass('near');
	$('#demo_tab div.act').next().addClass('near');

	//クリックしたら
	$('#demo_tab div').on('click',function(){

		//色の付け替えをする
		$('#demo_tab div').removeClass();
		$(this).addClass('act');
		$(this).prev().addClass('near');
		$(this).next().addClass('near');

		//タブと同じ番目を取得
		n = $('#demo_tab div').index(this);
		$b = $('#demo_body div').eq(n);

		//タブと同じ番目以外を消す。
		$b.prevAll().hide();
		$b.nextAll().hide();
		//タブと同じ番目のボディを表示
		$b.fadeIn();
	});
});

スタイルはこちら

#demo_tab{
	display: flex;
}
#demo_tab div{
	text-align: center;
	color: #FFF;
	background: #CCC;
	border-radius: 10px 10px 0px 0px;
	font-size: 12px;
	line-height: 30px;
	height: 30px;
	padding: 0 10px;
	cursor: pointer;
}
#demo_tab div.act{
	background: #666;
}
#demo_tab div.near{
	background: #999;
}

#demo_body{
}
#demo_body div{
	background: #666;
	min-height: 200px;
	display: none;
	color: #FFF;
	font-size: 12px;
	line-height: 30px;
	padding: 0 10px;
}
#demo_body div.act{
	display: block;
}

jQueryのnext,nextAllやprev,prevAllのメソッドの使用例にもなっています。