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);
});
});