<div class="ChangeElem_Btn_Content">
<button class="ChangeElem_Btn">1番目のタブ</button>
<button class="ChangeElem_Btn">2番目のタブ</button>
<button class="ChangeElem_Btn">3番目のタブ</button>
</div>
<ul>
<li class="ChangeElem_Panel">1番目のコンテンツ</li>
<li class="ChangeElem_Panel">2番目のコンテンツ</li>
<li class="ChangeElem_Panel">3番目のコンテンツ3</li>
</ul>
.ChangeElem_Panel{
display: none;
}
$(function () {
/*初期表示*/
$('.ChangeElem_Panel').hide();
$('.ChangeElem_Panel').eq(0).show();
$('.ChangeElem_Btn').eq(0).addClass('is-active');
/*クリックイベント*/
$('.ChangeElem_Btn').each(function () {
$(this).on('click', function () {
var index = $('.ChangeElem_Btn').index(this);
$('.ChangeElem_Btn').removeClass('is-active');
$(this).addClass('is-active');
$('.ChangeElem_Panel').hide();
$('.ChangeElem_Panel').eq(index).show();
});
});
});