Web production note

　【更新日 : 】

【CSS , jQuery】複数設置に対応したタブ切り替えのサンプル

Category：
css / js
Tags：
, ,

ページ内で複数設置に対応したタブ切り替えのサンプルです。
サンプルでは最低限の切り替えの記述のみ記載しています。

HTML

<div class="js-tab-wrap">
	<ul>
		<li class="js-tab-btn current">タブ1</li>
		<li class="js-tab-btn">タブ2</li>
		<li class="js-tab-btn">タブ3</li>
		<li class="js-tab-btn">タブ4</li>
	</ul>
	<div class="js-tab-contents current">
		<p>タブ1</p>
	</div>
	<div class="js-tab-contents">
		<p>タブ2</p>
	</div>
	<div class="js-tab-contents">
		<p>タブ3</p>
	</div>
	<div class="js-tab-contents">
		<p>タブ4</p>
	</div>
</div>

CSS

.js-tab-contents {
	display: none;
}
.js-tab-contents.current {
	display: block;
}

JavaScript

jQuery(document).ready(function($){
	//tab切り替え
	$('.js-tab-btn').click(function(){
		//セレクタ設定
		var thisElm = $(this);
		var thisTabWrap = thisElm.parents('.js-tab-wrap');
		var thisTabBtn = thisTabWrap.find('.js-tab-btn');
		var thisTabContents = thisTabWrap.find('.js-tab-contents');
		
		//current class
		var currentClass = 'current';
		
		//js-tab-btn current 切り替え
		thisTabBtn.removeClass(currentClass);
		thisElm.addClass(currentClass);
		
		//クリックされた tabが何番目か取得
		var thisElmIndex =  thisTabBtn.index(this);
		
		//js-tab-contents 切り替え
		thisTabContents.removeClass(currentClass);
		thisTabContents.eq(thisElmIndex).addClass(currentClass);
	});
});

js-tab-btn にもcurrent設定を入れてあるので自由に装飾する事ができます。

js-tab-wrapを1つのブロックとしているため、js-tab-wrap単位でページ内に複数設置する事が可能です。