タブを自作してみた

コピペ用なので簡単にですが、タブの実装方法をメモしておきます。

サンプルコード

タブのリンクURLで切り替えるタブを指定する方法です。

HTML

<div id="tab-area">
	<div class="tab-nav">
		<a href="#tab01" class="current">タブ1</a>
		<a href="#tab02">タブ2</a>
		<a href="#tab03">タブ3</a>
		<a href="#tab04">タブ4</a>
		<a href="#tab05">タブ5</a>
	</div>
	<div class="tab-contents">
		<div class="current" id="tab01">
			コンテンツ1
		</div>
		<div id="tab02">
			コンテンツ2
		</div>
		<div id="tab03">
			コンテンツ3
		</div>
		<div id="tab04">
			コンテンツ4
		</div>
		<div id="tab05">
			コンテンツ5
		</div>
	</div>
</div>

CSS

タブの実装に必要なところのみ抜粋しています。

#tab-area .tab-contents > div {
	display: none;
}
#tab-area .tab-contents > div:first-child {
	display: block;
}

JavaScript

$(function() {
	$(document).on('click', '#tab-area .tab-nav > a', function() {

		// コンテンツ部分の処理
		$('#tab-area .tab-contents > div').hide();
		$($(this).attr('href')).show();

		// ナビ部分の処理
		$('#tab-area .tab-nav > a').removeClass('current');
		$(this).addClass('current');

		return false;
	});
});

タブのデモページ1
　

クリックした要素が何番目かを見て、対応するタブを表示する方法です。

HTML

<div id="tab-area">
	<div class="tab-nav">
		<a href="" class="current">タブ1</a>
		<a href="">タブ2</a>
		<a href="">タブ3</a>
		<a href="">タブ4</a>
		<a href="">タブ5</a>
	</div>
	<div class="tab-contents">
		<div class="current" id="tab01">
			コンテンツ1
		</div>
		<div id="tab02">
			コンテンツ2
		</div>
		<div id="tab03">
			コンテンツ3
		</div>
		<div id="tab04">
			コンテンツ4
		</div>
		<div id="tab05">
			コンテンツ5
		</div>
	</div>
</div>

CSSは同じなので省略します。

JavaScript

$(function() {
	$(document).on('click', '#tab-area .tab-nav > a', function() {
		// コンテンツ部分の処理
		var target = $(this).index();
		$('#tab-area .tab-contents > div').hide().eq(target).show();

		// ナビ部分の処理
		$('#tab-area .tab-nav > a').removeClass('current');
		$(this).addClass('current');

		return false;
	});
});

タブのデモページ2