Tab | WEBデザイン Librarys

DEMO
初期表示
ネスト

Item A1
Item A2
Item A3

Item A1

Item A2

Item A3

Item A1
Item A2
Item A3

Item A1

Item A2

Item A3

Item B1
Item B2
Item B3

Item B1

B1 child 1
B1 child 2
B1 child 3

B1 child 2

B1 child 1

B1 child 3

Item B2

Item B3

使い方

+-.mod_tab-+の[data-name]属性にユニークな値を指定してください。複数設置やネストの場合のサーチに使用します。

+-.mod_tab-+の[data-search]属性にサーチ方法を指定します。指定方法は下記を参照してください。

[index] 並び順を基準に表示を切り替えます。
[id] idを参照して表示を切り替えます。
[name] nameを参照して表示を切り替えます。

index サーチ

[data-name]と[data-search]の指定のみで使用可能。
ただしタブボタンと表示切替の要素は同じ並びである必要があります。

id サーチ

+-.mod_tab-btn-+の[data-tar]属性に+-.mod_tab-item-+の[id]と同等の値を指定。
タブボタンと表示切替の要素の並び順はバラバラでも可能。
nameサーチとの差異はあまりないかも…

name サーチ

+-.mod_tab-btn-+の[data-tar]属性に+-.mod_tab-item-+の[name]と同等の値を指定。
タブボタンと表示切替の要素の並び順はバラバラでも可能。
idサーチとの差異はあまりないかも…

初期表示

任意の+-.abMod-btn-+に+-.act-+のクラスを入れておくことで、対象の要素を初期表示します。
1番目の要素を初期表示する場合は+-.act-+の指定はいりません。

表示切り替えによってスクロールバーの有無が変わる場合、ウィンドウが一瞬ガタつきます。

ボタンと表示切替の要素の間に他の要素を追加しても動作します。
+-.mod_tab-item-+内に+-.mod_tab-+を入れてネストすることも可能です。

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

HTML
CSS
Script

<div class="mod_tab" data-name="" data-search="">
    
      
    
    
      
    
  </div>

.mod_tab-list {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-main);
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.mod_tab-btn {
  padding: 8px 24px;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  position: relative;
  bottom: -1px;
  opacity: .7;
  transition: .2s;
  white-space: nowrap;
  cursor: pointer;
}
.mod_tab-btn.act {
  border-color: var(--line-main);
  background: var(--bg-paper);
  opacity: 1;
}
.mod_tab-btn:not(.act):hover {
  background: var(--hover);
  opacity: 1;
}
.mod_tab-sec {
  padding: 24px 16px;
  background: var(--bg-paper);
  position: relative;
}
.mod_tab-item {
  width: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.mod_tab-item.act {
  display: block;
  position: relative;
}

//初期設定
$('.mod_tab').each(function(){
  //関連付け
  let name = $(this).data('name');
  let search = $(this).data('search');
  let $btn_papa = $(this).children('.mod_tab-list');
  let $btn = $btn_papa.children('.mod_tab-btn');
  let $itm_papa = $(this).children('.mod_tab-sec');
  let $itm = $itm_papa.children('.mod_tab-item');

  $btn.each(function(i){
    $(this).data('name',name);
  });
  if(search == 'index'){
    //index
    $btn.each(function(i){
      $(this).data('tar',i);
    });
    $itm.each(function(i){
      $(this).addClass('tar_'+i);
    });
  } else if(search == 'id'){
    //id
    $itm.each(function(){
      $(this).addClass('tar_'+$(this).attr('id'));
    });
  } else if(search == 'name'){
    //name
    $itm.each(function(){
      $(this).addClass('tar_'+$(this).attr('name'));
    });
  }

  //初期表示
  if($btn_papa.children('.mod_tab-btn.act')[0]){
    let i = $btn_papa.children('.mod_tab-btn.act').index();
    $itm.eq(i).addClass('act');
  } else {
    let $t = $btn.eq(0);
    $t.addClass('act');
    $itm_papa.children('.tar_'+$t.data('tar')).addClass('act');
  }
});

$('.mod_tab-btn').click(function(){
  if($(this).hasClass('act')){return false;}

  let name = $(this).data('name');
  let tar = $(this).data('tar');
  let $mod = $('.mod_tab[data-name='+name+']');
  let $sec = $mod.children('.mod_tab-sec');

  //ボタン切替
  $(this).addClass('act').siblings().removeClass('act');

  //表示切替
  $sec.children('.mod_tab-item').fadeOut().removeClass('act');
  $sec.children('.mod_tab-item.tar_'+tar).hide().addClass('act').fadeIn();
});