web関連

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

2020/03/18

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

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

デモ

<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')って指定しなおした

htmlコード // タブの記述 タブ01 タブ02 ...
 

.each(function()内で$(this)を使えば個々に指定できるのしらなくて何時間も躓いたので備忘録