ウェブサイトで多くの要素を省スペースで表示するのに役立つタブメニューは汎用的に使えて実用的なUIです。このタブメニューのインターフェイスはjQueryを利用すると簡単に実装出来ます。

今回はタブメニューを実装するまでを解説していきます。また、1ページ内で複数のタブを実装するにはプラグインの形式にすると便利ですので、最終的にプラグインの形にするまで2回のエントリーに分けて解説しようと思います。

HTMLはタブをul li、クリックされたタブに対応する内容を表示する要素をdivでマークアップします。HTMLコード、jQueryコードはそれぞれ次のようになります。

HTML Code

<div class="tab">
	<ul class="tab-list pkg">
		<li><a href="javascript:;">tabA</a></li>
		<li><a href="javascript:;">tabB</a></li>
		<li><a href="javascript:;">tabC</a></li>
	</ul>
	<div class="tab-box">
		<p>tabA's Text</p>
	</div>
	<div class="tab-box">
		<p>tabB's Text</p>
	</div>
	<div class="tab-box">
		<p>tabC's Text</p>
	</div>
<!-- / .tab --></div>

jQuery Code

$(function(){
	var box = $('.tab-box');	   
	var tabList = $('.tab-list').find('li');
	box.not(':first').hide();
	tabList.eq(0).addClass('selected');
	tabList.click(function(){
		var tabIndex = tabList.index(this);
		tabList.removeClass('selected');
		$(this).addClass('selected');
		box.hide().eq(tabIndex).addClass('selected').fadeIn();
	});
});

それでは順を追ってjQueryコードを書きながら解説して行きます。まずはjQueryを実効しても問題無い状態（HTMLが読み込まれた段階）になったら実効するようにする命令を書きます。これはjQueryを実効させるのに必ず必要になるので丸暗記で行きましょう。

$(function() {
	Do Something
});

別の書き方も出来ます。

$(document).ready(function() {
	Do Something
});

こう書くと意味がわかると思います。documentがreadyになったら、要するにドキュメントの準備が出来たら実効すると言う意味です。この(document).readyは省略する事が出来ます。

ではこのfunction(){}内に進みます。まずはページが表示された時の状態を作ります。

• 最初のタブが選択された状態
• そのタブに対応した要素が表示されている

この2つがページが表示された時の状態です。最初のタブが選択された状態はliにclass="selected"を付加、そのタブに対応した要素以外のdivを非表示にします。

$(function() {
	var box = $('.tab-box');	   
	var tabList = $('.tab-list').find('li');
	box.not(':first').hide();
	tabList.eq(0).addClass('selected');
});

タブのリスト、表示・非表示を切り替えるdivを変数に代入してしまいます。表示・非表示を切り替えるdivを変数boxに、タブのリストを変数tabListにそれぞれ代入します。何度も出てきそうな要素はこのように変数に代入しておけば何度も要素を探す必要がなくなります。

変数名の先頭にvarとありますが、これはvarの次に書く名前は変数ですよと言う宣言です。

ここで$('.tab-list').find('li')とありますが、CSSで言う.tab-list liと同じ事です。jQueryではCSSと同じ書式で書く事が出来るので$('.tab-list li')と書いても良いのですが、この書き方だとjQueryではまずli要素を探し、次に.tab-listが付いた要素を探すと言う順になるようです。
なので最初に.tab-listを探した方が効率よくセレクタを検索する事が出来ます。$('.tab-list').find('li')と記述すれば、まず.tab-listを探し、次にli要素を探すと言う順番になります。

表示・非表示を切り替えるdiv（以下変数名boxとします）は1番最初の要素以外を非表示にする必要があるります。1番最初の要素以外は.not('除外するセレクタ')で特定出来ます。
そして非表示にするは.hide()と書きます。なので、box.not(':first').hide()と書けば、2番目以降のboxを非表示にしてくれます。

次にタブ内の最初のリストに選択中である事を示す.selectedを付加します。1番最初の要素を特定するには.eq(インデックス)で特定出来ます。インデックスとは選択中のセレクタに対して0から連番となる番号です。eq(0)と書けば1番最初、eq(1)と書けば2番目が特定出来ます。
クラスを付加するには.addClass('クラス名')と書きます。と言う事はtabList.eq(0).addClass('selected')と書けば、tabListの1番目の要素に対して.selectedを付加すると言う事になります。

ではタブがクリックされた時の挙動に進みます。

$(function(){
	var box = $('.tab-box');	   
	var tabList = $('.tab-list').find('li');
	box.not(':first').hide();
	tabList.eq(0).addClass('selected');
	tabList.click(function(){
		Do Something
	});
});

『クリックされたら◯◯をする』はclick(function() {◯◯});と書きます。◯◯の部分にまた命令を書いて行きます。

$(function(){
	var box = $('.tab-box');	   
	var tabList = $('.tab-list').find('li');
	box.not(':first').hide();
	tabList.eq(0).addClass('selected');
	tabList.click(function(){
		var tabIndex = tabList.index(this);
		tabList.removeClass('selected');
		$(this).addClass('selected');
		box.hide().eq(tabIndex).addClass('selected').fadeIn();
	});
});

少々複雑なので箇条書きにします。

• クリックされたタブ（li）が何番目なのかを調べる
• クリックされたタブ（li）の番号（index）を変数に入れる
• タブに付加されているclass='selected'を取り除く
• クリックされたタブ（li）のみにclass='selected'を付加する

クリックされたliが何番目のliかどうかは.index(引数)と書きます。引数にはクリックされた要素を入れます。
ここでthisと言う引数が出てきますが、これはthisとは自分自信を指す言葉です。
今tabListの中でクリックされた要素に対して◯◯をすると言う命令を書こうとしています。この場合はtabListの中でクリックされた要素がthisになります。
var tabIndex = tabList.index(this)と書く事により、tabListの中でクリックされた要素のindexをtabIndexと言う変数の中に入れます。

8行目でタブに付加されている.selectedを一旦削除します。クラスを付加するのは.addClass()ですが、削除は.removeClass()と書きます。

9行目でクリックされた要素に対して再度.selectedを付加します。

10行目が肝になります。まずはboxを一旦全て非表示にします。非表示にするには先ほど.hide()と書きました。そして先ほど解説したeq()を利用してクリックされた要素を特定します。eqフィルタに対してクリックされた要素の番号を渡せば、それに対応したboxが特定出来ます。.eq(tabIndex)でクリックされた要素に対するboxが特定出来ます。
そしてそのboxに対して.addClass('selected')で.selectedを付加し、.fadeIn()で表示します。.fadeIn()はフェードインのアニメーションをしながら表示にしてくれます。アニメーションが不要でしたら.show()でも構いません。

これでjQueryでタブインターフェイスが実装されます。

View Demo

参考までに変数や.find()を使わず、直接セレクタに対して命令をしていくパターンを書いておきます。

$(function(){
	$('.tab-list li:first-child').addClass('selected');
	$('.tab-box').not(':first').hide();
	$('.tab-list li').click(function() {
		var tabIndex = $('.tab-list li').index(this);
		$('.tab-list li').removeClass('selected');
		$(this).addClass('selected');
		$('.tab-box').hide().eq(tabIndex).addClass('selected').fadeIn();
	});
});

次のエントリーでこのタブをプラグインの形にしていこうかと思います。