コピペで完結！タブ切替 #06【縦型タブ（サイドバー風）】

/* 縦型タブ（サイドバー風）のCSS */

/* ===============================
   色をまとめて管理する変数定義
   =============================== */
:root {
  --ink:#0f172a;    /* 基本文字色（濃い黒） */
  --muted:#64748b;  /* 補助文字色（灰色） */
  --accent:#0b6bff; /* アクセントカラー（青） */
  --border:#e5e7eb; /* 枠線用カラー（薄いグレー） */
}

/* ===============================
   タブ全体の外枠
   =============================== */
#demo-section .tab-container {
  display:flex;                  /* 左タブ・右パネルを横並びにする */
  border:1px solid var(--border);/* 外枠に枠線を付ける */
  border-radius:10px;            /* 角を丸くする */
  overflow:hidden;               /* 内側がはみ出さないようにする */
  min-height:200px;              /* 高さを最低200px確保 */
}

/* ===============================
   縦方向タブのリスト（左側）
   =============================== */
#demo-section .tablist {
  flex:0 0 160px;                /* 幅を固定：160px */
  display:flex;                  /* フレックスボックス化 */
  flex-direction:column;         /* 縦に並べる */
  background:#f8fafc;            /* 薄い背景色 */
  border-right:1px solid var(--border); /* 右に仕切り線 */
}

/* ===============================
   タブボタン共通のスタイル
   =============================== */
#demo-section .tablist button {
  appearance:none;               /* ブラウザのデフォルト装飾を無効化 */
  border:none;                   /* 枠線を消す */
  background:none;               /* 背景も消す */
  padding:12px 16px;             /* 内側余白 */
  text-align:left;               /* 左寄せにする */
  font-size:14px;                /* 文字サイズ */
  color:var(--ink);              /* 基本文字色 */
  cursor:pointer;                /* ホバー時に指カーソル */
  border-bottom:1px solid var(--border); /* 下に仕切り線 */
}

/* ===============================
   選択されているタブ
   =============================== */
#demo-section .tablist button[aria-selected="true"] {
  background:var(--accent);      /* 背景を青に */
  color:#fff;                    /* 文字色を白に */
}

/* ===============================
   パネル部分（右側の表示エリア）
   =============================== */
#demo-section .tabpanel {
  flex:1;                        /* 残り幅いっぱい広がる */
  padding:16px;                  /* 内側余白 */
  display:none;                  /* 初期は非表示 */
}

/* ===============================
   選択中のパネルだけ表示
   =============================== */
#demo-section .tabpanel[aria-hidden="false"] {
  display:block;                 /* 表示に切り替える */
}

<section id="demo-section">
  <div class="tab-container" id="vertical-tabs">
    <div class="tablist" role="tablist" aria-orientation="vertical">
      <button id="vtab1" role="tab" aria-controls="vpanel1" aria-selected="true">タブ1</button>
      <button id="vtab2" role="tab" aria-controls="vpanel2" aria-selected="false">タブ2</button>
      <button id="vtab3" role="tab" aria-controls="vpanel3" aria-selected="false">タブ3</button>
    </div>
    <div id="vpanel1" class="tabpanel" role="tabpanel" aria-labelledby="vtab1" aria-hidden="false">
      <p>タブ1の内容がここに表示されます。</p>
    </div>
    <div id="vpanel2" class="tabpanel" role="tabpanel" aria-labelledby="vtab2" aria-hidden="true">
      <p>タブ2の内容がここに表示されます。</p>
    </div>
    <div id="vpanel3" class="tabpanel" role="tabpanel" aria-labelledby="vtab3" aria-hidden="true">
      <p>タブ3の内容がここに表示されます。</p>
    </div>
  </div>
</section>

/* 縦型タブのJavaScript制御 */
(function(){
  // タブ全体のルート要素を取得
  const root = document.getElementById('vertical-tabs');
  if(!root) return;

  // 全タブボタンを取得
  const tabs = root.querySelectorAll('[role="tab"]');

  // -------------------------------
  // タブ切り替え処理
  // -------------------------------
  function activate(i, focus=true){
    tabs.forEach((t,idx)=>{
      const sel = idx===i;  // 現在のループが選択対象かどうか
      t.setAttribute('aria-selected', sel); // aria-selected を更新

      // ボタンが制御するパネルを取得
      const panel = root.querySelector('#'+t.getAttribute('aria-controls'));
      if(panel) panel.setAttribute('aria-hidden', !sel); // 表示/非表示切替

      // 選択時にフォーカスを移動（キーボード操作用）
      if(sel && focus) t.focus();
    });
  }

  // -------------------------------
  // クリックでタブ切替
  // -------------------------------
  tabs.forEach((tab,i)=>{
    tab.addEventListener('click', ()=>activate(i,false));

    // -------------------------------
    // キーボード操作対応
    // ↑ / ↓ / Home / End で移動
    // -------------------------------
    tab.addEventListener('keydown',(e)=>{
      let ni=i;
      if(e.key==='ArrowUp')   ni=(i-1+tabs.length)%tabs.length; // 上キー
      if(e.key==='ArrowDown') ni=(i+1)%tabs.length;             // 下キー
      if(e.key==='Home')      ni=0;                             // Homeキー
      if(e.key==='End')       ni=tabs.length-1;                 // Endキー

      if(ni!==i){ 
        e.preventDefault(); // スクロールなどのデフォルト動作を防ぐ
        activate(ni);       // 新しいタブを有効化
      }
    });
  });
})();