jQueryを使ってタブで表示切り替え

htmlコード

//　タブの記述

  

    タブ01
  
  

    タブ02
  
  

    タブ03
  


//　切り替えるコンテンツ部分

	タブ01と紐づいているよ


	タブ02と紐づいているよ


	タブ03と紐づいているよ

cssコード

最低限のcssです。

.js_content{
	display: none;
}
.js_content.active{
	display: block;
}

jsコード

$(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').eq(index).addClass('active').siblings('div').removeClass('active');
    }
  });
});

上記jsコードを使うときはjQueryをちゃんと宣言してないとエラーがでるので気をつけてください。