さぁ!検索しよう!

サイドバーやナビゲーション等に使える汎用性の高いタブパネルの作り方を解説します。

始めにデモをご覧ください。

完成デモ

上のタブをクリックすると、タブと共にその内容も同時に切り替わりることが確認できます。
続いて、各ソースコードを解説します。

始めにHTMLです。

HTML

<div>
<h3 class="active">最新の記事</h3>
<h3>コメント</h3>
<h3>人気記事</h3>
<ul class="active">
  <li>最新の記事</li>
  <li>最新の記事</li>
  <li>最新の記事</li>
</ul>
<ul>
  <li>コメント</li>
  <li>コメント</li>
  <li>コメント</li>
</ul>
<ul>
  <li>人気記事</li>
  <li>人気記事</li>
  <li>人気記事</li>
</ul>
</div>

h3要素がタブとなり、ul要素がパネルとなります。また、初期状態は一番目に位置する最新の記事のタブとパネルがアクティブ状態となるように、h3要素とul要素それぞれにactiveクラスを追加しています。

<h3 class="active">
<ul class="active">

次にCSSです。

CSS

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div {
	width:360px;
}

h3 {
	background:#E3DECC;
	color:#333;
	cursor:pointer;
	float:left;
	margin:0;
	padding:10px;
	text-align:center;
	transition:all 0.5s;
	width:120px;
}
h3.active {
	background:#A18E5C;
	color:#fff;
	cursor:default;
}

ul {
	background:#A18E5C;
	clear:left;
	color:#fff;
	display:none;
	list-style:none;
	margin:0;
	padding:0;
}
ul.active {
	display:block;
}

li {
	border-bottom:1px solid #E3DECC;
	padding:10px;
}
  • アクティブ状態のタブはカーソルをcursor:default;で標準カーソルに、それ以外のタブはcursor:pointer;でリンクカーソルにしています。
  • 	h3 {
    		background:#E3DECC;
    		color:#333;
    		cursor:pointer;
    		float:left;
    		margin:0;
    		padding:10px;
    		text-align:center;
    		transition:all 0.5s;
    		width:120px;
    	}
    	h3.active {
    		background:#A18E5C;
    		color:#fff;
    		cursor:default;
    	}
    	
  • アクティブ状態のパネルはdisplay:block;で表示状態にし、それ以外のパネルはdisplay:none;で非表示にしています。
  • 	ul {
    		background:#A18E5C;
    		clear:left;
    		color:#fff;
    		display:none;
    		list-style:none;
    		margin:0;
    		padding:0;
    	}
    	ul.active {
    		display:block;
    	}
    	

最後にjQueryです。

jQuery

$(function(){
	var $h3 = $('h3'); 
	$h3.click(function(){ 
		var $ind = $(this).index(); 
		$h3.removeClass('active').eq($ind).addClass('active'); 
		$('ul').removeClass('active').eq($ind).addClass('active'); 
	}); 
});
  • タブである$h3をクリックすると、クリックされたタブの行番号が$indに代入されます。
  • 	$h3.click(function(){ 
    			var $ind = $(this).index();
    	
  • $h3.removeClass('active')で現在のタブに追加されているactiveクラスが削除され、eq($ind).addClass('active');でクリックされたタブにactiveクラスが追加されます。
  • 	$h3.removeClass('active').eq($ind).addClass('active'); 
    	
  • $('ul').removeClass('active')で現在のタブに追加されているactiveクラスが削除され、eq($ind).addClass('active');でクリックされたタブと同じ行番号に位置するパネルにactiveクラスが追加されます。
  • 	$('ul').removeClass('active').eq($ind).addClass('active');
    	

以上です。