markdown jQuery的复数设置に対応したタブ切り替え

Posted 2021-05-06

# jQuery複数設置に対応したタブ切り替え

html
```
<div class="js-tab-wrap">
	<ul>
		<li class="js-tab-btn current">タブ1</li>
		<li class="js-tab-btn">タブ2</li>
		<li class="js-tab-btn">タブ3</li>
		<li class="js-tab-btn">タブ4</li>
	</ul>
	<div class="js-tab-contents current">
		<p>タブ1</p>
	</div>
	<div class="js-tab-contents">
		<p>タブ2</p>
	</div>
	<div class="js-tab-contents">
		<p>タブ3</p>
	</div>
	<div class="js-tab-contents">
		<p>タブ4</p>
	</div>
</div>

```

css
```
.js-tab-contents {
	display: none;
}
.js-tab-contents.current {
	display: block;
}

```

js
```
jQuery(document).ready(function($){
	//tab切り替え
	$('.js-tab-btn').click(function(){
		//セレクタ設定
		var thisElm = $(this);
		var thisTabWrap = thisElm.parents('.js-tab-wrap');
		var thisTabBtn = thisTabWrap.find('.js-tab-btn');
		var thisTabContents = thisTabWrap.find('.js-tab-contents');
		
		//current class
		var currentClass = 'current';
		
		//js-tab-btn current 切り替え
		thisTabBtn.removeClass(currentClass);
		thisElm.addClass(currentClass);
		
		//クリックされた tabが何番目か取得
		var thisElmIndex =  thisTabBtn.index(this);
		
		//js-tab-contents 切り替え
		thisTabContents.removeClass(currentClass);
		thisTabContents.eq(thisElmIndex).addClass(currentClass);
	});
});

```

## 参考サイト
http://sakatamemo.info/css-js/380/

## サンプル
http://www.kyoto-apartment.com/cms/jp/list/ka-01