デモページはこちら

jQueryのindexメソッドで要素の順番を取得、eqメソッドで要素の順番を指定してタブ切り替えを実装します。

以下のhtmlの構造でテストします。一番外側のクラス名tab01のdivタグは連番で複製します。

<div class="tab01">
	<ul class="tab-wrap">
		<li class="tab active">メニュー01</li>
		<li class="tab">メニュー02</li>
		<li class="tab">メニュー03</li>
	</ul>
	<div class="box active">
		<p class="title">メニュー01：タイトル</p>
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="box">
		<p class="title">メニュー02：タイトル</p>
		<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="box">
		<p class="title">メニュー03：タイトル</p>
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

tab01ではセレクタに全てのタブ、indexメソッドの引数に対象のタブを指定します。これでクリックしたタブの順番が変数iに格納されます。順番は0からスタートします。同様にeqメソッドも順番は0からスタートするので、クラス名boxのdivタグの中から対象のコンテンツにaddClassして表示できます。

$(function() {
	$('.tab01 .tab').on('click', function() {
		var i = $('.tab01 .tab').index(this);
		$('.tab01 .tab, .tab01 .box').removeClass('active');
		$(this).addClass('active');
		$('.tab01 .box').eq(i).addClass('active');
	});
});

tab02ではセレクタに対象のタブ、indexメソッドは引数なしにします。これで対象のタブが兄弟要素の何番目かが取得でき、結果クリックしたタブの順番が変数iに格納されます。

$(function() {
	$('.tab02 .tab').on('click', function() {
		var i = $(this).index();
		$('.tab02 .tab, .tab02 .box').removeClass('active');
		$(this).addClass('active');
		$('.tab02 .box').eq(i).addClass('active');
	});
});

tab03ではeqメソッドをメソッドではなくセレクタとして使用しています。

$(function() {
	$('.tab03 .tab').on('click', function() {
		var i = $('.tab03 .tab').index(this);
		$('.tab03 .tab, .tab03 .box').removeClass('active');
		$(this).addClass('active');
		$('.tab03 .box:eq(' + i + ')').addClass('active');
	});
});