【jQuery】タブ切り替えの対象が複数ある時

一つのタブで複数の要素を切り替えようと思った時の備忘録

タブ切り替えの対象が複数ある時のソースコード

デモ

<style>
.js_content div{
	display: none;
}
.js_content div.active{
	display: block;
}
</style>

<div id="js_tabBtn">
  <div class="select_btn active">
    日本語
  </div>
  <div class="select_btn">
    英語
  </div>
</div>

<div class="js_content">
	<div class="active">
		日本語テキスト01
	</div>
	<div>
		英語テキスト01
	</div>
</div>
<div class="js_content">
	<div class="active">
		日本語テキスト02
	</div>
	<div>
		英語テキスト02
	</div>
</div>
<div class="js_content">
	<div class="active">
		日本語テキスト03
	</div>
	<div>
		英語テキスト03
	</div>
</div>

<script>
jQuery(function($){
	$(function(){
		$('#js_tabBtn .select_btn').on('click', function(){
			if($(this).not('active')){
				// タブ周りの記述
				$(this).addClass('active').siblings('div').removeClass('active');
				var index = $('#js_tabBtn .select_btn').index(this);

				// コンテンツ部分の記述
				$('.js_content').each(function() {
					$(this).children('div').eq(index).addClass('active').siblings('div').removeClass('active');
				});
			}
		});
	});
});
</script>

昔やったタブ切り替えに.each(function()を足してそれぞれのコンテンツ内を指定するために$(this).children('div')って指定しなおした