Tweet

Pocket

タブ切り替えのJQueryをプラグイン化してみた。

html

<script>
	$(function() {
		$('.tab li').tabChange({
			tabClick: '.tab li', // タブのクラス
			tabContents: '.content li' // コンテンツのクラス
		});
	});
</script>

<ul class="tab">
	<li class="select">タブ1</li>
	<li>タブ2</li>
	<li>タブ3</li>
	<li>タブ4</li>
</ul>
<ul class="content">
	<li>コンテンツ内容1コンテンツ内容1コンテンツ内容1コンテンツ内容1コンテンツ内容1コンテンツ内容1</li>
	<li class="displayNone">コンテンツ内容2コンテンツ内容2コンテンツ内容2コンテンツ内容2コンテンツ内容2コンテンツ内容2</li>
	<li class="displayNone">コンテンツ内容3コンテンツ内容3コンテンツ内容3コンテンツ内容3コンテンツ内容3コンテンツ内容3</li>
	<li class="displayNone">コンテンツ内容4コンテンツ内容4コンテンツ内容4コンテンツ内容4コンテンツ内容4コンテンツ内容4</li>
</ul>

scss

.tab {
	overflow:hidden;

	li {
		background:#ccc;
		padding:5px 25px;
		float:left;
		margin-right:1px;
		list-style:none;
		cursor: pointer;
		
		&.select {
			background:#eee;
		}
	}
}

.content li{
	background:#eee;
	padding:20px;
	list-style:none;
}

.displayNone {
	display:none;
}

JQuery

;(function($) {
	$.fn.tabChange = function(options){
		// ここからがタブ切り替えの動作
		$(this).click(function(){
			// .index()を使いクリックされたタブが何番目かを調べ、
			// indexという変数に代入します。
			var index = $(options.tabClick).index(this);

			// コンテンツを一度すべて非表示
			$(options.tabContents).addClass('displayNone').hide();

			// クリックされたタブと同じ順番のコンテンツを表示
			$(options.tabContents).eq(index).show().removeClass('displayNone');

			// 一度タブについているクラスselectを削除
			$(options.tabClick).removeClass('select');

			// クリックされたタブのみにクラスselectを付ける
			$(this).addClass('select');

			$(this).blur();
		});
	};
})(jQuery);