エイチデザイン / タブ切り替え

タブ切り替え

フェードイン表示のシンプルなタブ機能

CODE
DEMO

説明
使い方
解説

要素の表示切替にフェードイン・フェードアウトを取り入れたタブ機能。
ターゲットをIDでサーチしているので複数設置やネストも可能。

CSSを変更すれば大概のデザインに変更できるのでご自由に変更してください。
表示切替のフェードイン・フェードアウトはJSの[.fadeOut()]と[.fadeIn()]を消せば独自の表示切替に変更できます。

【注意点】
表示が切り替える要素の高さが大幅に違う場合（スクロールの有無）はウィンドウが一瞬ガタつくので注意。

[ul.tabMod-list]の[id]属性に名称追加。
[li.tabMod-btn]の[data-tar]属性に対象とする[div.tabMod-item]の[ID]を指定。

[ul.tabMod-list]の[id]名を表示切替のターゲット範囲とするために、[li.tabMod-btn]に[data-name=\"(id名)\"]と、[div.tabMod-item]にクラス[tabMod-(id名)]を追加する。
これにより複数設置やネストしてもターゲット以外のタブに影響を与えないようにしている。

[li.tabMod-btn]の[data-tar]に設定した対象の[id]で切り替え対象を参照して実行。

ボタンと表示項目（[ul.tabMod-list]と[div.tabMod-sec]）の間に要素を追加しても動作します。

ライブラリを導入する前に

html


  
    Item 1
    Item 2
    Item 3
  
  
    Item 1
    Item 2
    Item 3

css

.tabMod-list {
  display: flex;
  margin: 0 0 24px;
  justify-content: center;
  align-items: center;
}
.tabMod-btn {
  padding: 8px 24px;
  border-radius: 4px;
  transition: 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.tabMod-btn.act {background: #333;}
.tabMod-sec {position: relative;}
.tabMod-item {
  width: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.tabMod-item.act {
  display: block;
  position: relative;
}
@media screen and (max-width: 768px) {
  .tabMod-btn {padding: 8px 16px;}
}

jQuery

//初期設定
$('.tabMod-list').each(function(){
  const tarID = $(this).attr('id');
  $(this).children('.tabMod-btn').data('name',tarID);
  $(this).siblings('.tabMod-sec').children('.tabMod-item').addClass('tabMod-'+tarID);

  $(this).children('.tabMod-btn:first-child').addClass('act');
  $(this).siblings('.tabMod-sec').children('.tabMod-item:first-child').addClass('act');
});

$('.tabMod-btn').click(function(){
  if($(this).hasClass('act')){return false;}
  //ボタン切替
  $(this).siblings().removeClass('act');
  $(this).addClass('act');

  //表示切替
  $(this).parents('.tabMod').find('.tabMod-'+$(this).data('name')).fadeOut().removeClass('act');
  $('#'+$(this).data('tar')).fadeIn().addClass('act');
});

Item 1
Item 2
Item 3

Item 1

Item 2

Item 3

TOP