jQuery タブメニューメモ - ウォズニアック先生。パソコンがしたいんです・・・

HTML

----------

<div class="ChangeElem_Btn_Content">
<button class="ChangeElem_Btn">厳選ご当地</button>
<button class="ChangeElem_Btn">カタログギフト</button>
<button class="ChangeElem_Btn">スイーツ・食品</button>
<button class="ChangeElem_Btn">アレルギー対応食品</button>
<button class="ChangeElem_Btn">雪室珈琲</button>
<button class="ChangeElem_Btn">タオル</button>
<button class="ChangeElem_Btn">出産・内祝いギフト</button>
</div>
<ul>
<li class="ChangeElem_Panel">
<div class="item-box">
<div>
<a href="https://item.rakuten.co.jp/gift-concierge/uo-zenmai-01-1/" target="_parent">
<img src="img/thumb-zentmai-001.jpg" alt="">
</a>
</div>

<div>
<a href="#" target="_parent">
<img src="" alt="">
</a>
</div>
</div> 
</li>
<li class="ChangeElem_Panel">2番目のコンテンツ</li>
<li class="ChangeElem_Panel">3番目のコンテンツ3</li>
<li class="ChangeElem_Panel">4番目のコンテンツ3</li>
<li class="ChangeElem_Panel">5番目のコンテンツ3</li>
<li class="ChangeElem_Panel">6番目のコンテンツ3</li>
<li class="ChangeElem_Panel">7番目のコンテンツ3</li>
</ul>

</div>
</div>

--------

CSS

<style>

.container {}
.inner{width:1000px; margin:0 auto;}

/*--タブ--*/

.ChangeElem_Panel{
display: none;
}

</style>

----------

// タブメニュー

$(function(){

// 初期表示
$('.ChangeElem_Panel').hide(); // コンテンツ非表示
$('.ChangeElem_Panel').eq(0).show(); // index 0 最初のコンテンツ表示
$('.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'); // is-activeを外す
$(this).addClass('is-active'); // 押したボタンに is-activeをつける
$('.ChangeElem_Panel').hide(); // コンテンツ非表示
$('.ChangeElem_Panel').eq(index).show(); //押されたボタンに対応した index 番号のコンテンツを表示
});
});
});

</script>