jQueryを使ったタブメニュー

お疲れ様です。いずみです。

本日は jQueryを使ったタブメニューを紹介します。

ざっくり分けると、2つのやり方があると思います。
１つはaタグ(アンカーリンク)のhref属性を使ったやり方。
もう１つはクリックしたタブのインデックス番号を取得し、同じインデックス番号のパネルを表示するやり方です。

今回は後者のインデックス番号を利用したやり方を紹介します。
タブコンテンツが複数あっても、対応出来るようになってます。

jqueryのコードはコチラです↓

let tab = $('.tab-btn');
//タブを変数に格納

tab.on('click', function(){
//タブをクリックしたら時〜

  let tabWrap = $(this).parents('.tab-wrap');
  //クリックしたタブの親要素を一度取得
  
  let tabButton = tabWrap.find('.tab-btn');
  //親からのタブを変数に格納、コレでタブが複数あっても対応が可能です
 
  let tabPanel = tabWrap.find('.tab-content');
  //親からのタブのパネルを変数に格納

  tabButton.removeClass('current');
  $(this).addClass('current');
  //タブのカレント表示を一度削除し、クリックしたタブにカレントのスタイルを当てる
  
  let index = tabButton.index(this);
  //クリックしたタブのインデックス番号を取得
  
  tabPanel.fadeOut(200).eq(index).fadeIn();
  //パネルを一度全て非表示し、インデックス番号に対応したパネルだけを表示
});

このようになります。
いきなりタブとパネルを変数に入れたくなるのですが、一度、親要素(タブとパネルのセットの親)を取得しています。

こうする事で、タブコンテンツが複数あってもクリックしたタブの親のみ参照する事ができます。

取得した親要素から.findでタブとパネルを取得して変数に格納し、タブのカレント表示を一度全て削除します。
その後$(this)でクリックしたタブのみカレント表示させます。

そして、クリックしたタブのインデックス番号を取得します。

プログラミング言語の数字は0から始まるので、1つ目のタブをクリックすると、インデックス番号は0になります。
2つ目のタブをクリックすると、インデックス番号は2になります。

パネルは.fadeOut()を使い、一度全て非表示にします。
丸括弧の中はフェードにかかる時間を引数として入れる事が出来ます。

その後.eq(index)で、クリックしたタブと同じインデックス番号のパネルを取得し.fadeIn()で表示します。

この丸括弧の中もフェードにかかる時間を引数として入れる事が出来ます。
空欄にすると、デフォルトの400ms(ミリ秒)になります。