さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】タブ切り替えのスクリプトをプラグイン化

Pocket
LINEで送る

タブ切り替えの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);

カテゴリー:JQuery, アニメーション

コメントを残す

コメント内容