web関連

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

2018/06/06
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をちゃんと宣言してないとエラーがでるので気をつけてください。

Uncaught TypeError: $ is not a functionとは 日本語にすると「$っていう関数なんて定義されてないから...

上の「html・css・js」コードを使えばとりあえずタブでの切り替えは動きます。

サイト規模が大きくなると使う頻度が高い気がする