JavaScriptでタブメニューを自作する｜jQueryなし・2パターンの実装例付きで解説

<!-- タブ全体のラッパー。data-tab-group でグループを識別する -->
<div class="tabs" data-tab-group="demo01">

  <!-- タブリスト。data-tab にパネルのIDを指定する -->
  <ul class="tab-list">
    <li><button type="button" data-tab="font">フォント<br class="only-sp">選定</button></li>
    <li><button type="button" data-tab="layout">レイアウト<br class="only-sp">設計</button></li>
    <li><button type="button" data-tab="image">画像<br class="only-sp">最適化</button></li>
    <li><button type="button" data-tab="performance">パフォー<br class="only-sp">マンス</button></li>
  </ul>

  <!-- パネルの外枠。高さのアニメーションはこの要素に対して行う -->
  <div class="tab-panels-outer">

    <!-- data-panel はタブの data-tab と対応させる -->
    <div class="tab-panel" data-panel="font">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

    <div class="tab-panel" data-panel="layout">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

    <div class="tab-panel" data-panel="image">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

    <div class="tab-panel" data-panel="performance">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

  </div><!-- /.tab-panels-outer -->

</div><!-- /.tabs -->

/* ブレイクポイント：768px以上をPC、767px以下をSPとして扱う */

/* ===== タブリスト ===== */
.tab-list {
  display: flex;
}

@media (min-width: 768px) {
  .tab-list {
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .tab-list {
    gap: 5px;
  }
}

/* 各タブを均等幅に並べる */
.tab-list li {
  flex: 1;
}

/* タブボタンの共通スタイル */
.tab-list button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background: #f8f8f8;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  /* 背景色・文字色の切り替えをなめらかにする */
  transition: background-color 500ms cubic-bezier(.215, .61, .355, 1), color 500ms cubic-bezier(.215, .61, .355, 1);
}

@media (min-width: 768px) {
  .tab-list button {
    height: 80px;
    padding: 0 0 18px;
    font-size: 18px;
    line-height: 1.5;
  }
}

@media (max-width: 767px) {
  .tab-list button {
    height: 70px;
    padding: 0 0 15px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* 矢印アイコン（::before 擬似要素で描画）、下向き（↓） */
.tab-list button::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: transform 300ms cubic-bezier(.215, .61, .355, 1);
}

@media (min-width: 768px) {
  .tab-list button::before {
    bottom: 15px;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-right: 3px solid #1a6bbf;
    border-bottom: 3px solid #1a6bbf;
  }
}

@media (max-width: 767px) {
  .tab-list button::before {
    bottom: 12px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-right: 2px solid #1a6bbf;
    border-bottom: 2px solid #1a6bbf;
  }
}

/* ホバー時に矢印を少し下にずらす */
@media (min-width: 768px) {
  .tab-list button:hover::before {
    transform: translateY(5px) rotate(45deg);
  }
}

/* アクティブなタブのスタイル */
.tab-list button.is-active {
  background: #eef2f7;
  color: #1a6bbf;
}

/* ===== パネル外枠 ===== */
/* overflow: hidden でアニメーション中にはみ出た要素を隠す */
.tab-panels-outer {
  position: relative;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background: #eef2f7;
  overflow: hidden;
}

/* 各パネルは初期状態で非表示。JSで display: block に切り替える */
.tab-panel {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tab-panel {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .tab-panel {
    padding: 20px 15px;
  }
}

/* 以降、パネルの中身に関するスタイルは省略 */

const tabs = (() => {
  // アニメーションの設定
  const props = {
    switchDuration: 500, // アニメーション時間（ミリ秒）
    switchEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // イージング
  };

  function init() {
    // 1番目のタブをアクティブにする
    document.querySelectorAll('.tabs').forEach((el) => {
      el.querySelectorAll('.tab-list li:nth-child(1) button').forEach(btn => btn.classList.add('is-active'));

      const panel = el.querySelector('.tab-panel:nth-child(1)');
      if (panel) {
        panel.classList.add('is-active');
        panel.style.display = 'block';
      }
    });

    // タブボタンにクリックイベントを登録する
    document.querySelectorAll('.tab-list button').forEach((btn) => {
      btn.addEventListener('click', (e) => {
        const btn = e.currentTarget;
        const tabsEl = btn.closest('.tabs');
        const id = btn.dataset.tab;

        // アニメーション中・すでにアクティブなタブはスキップする
        if (!tabsEl.classList.contains('is-animating') && !btn.classList.contains('is-active')) {
          tabSwitch(tabsEl, id);
        }
      });
    });
  }

  // タブを切り替える関数
  function tabSwitch(tabsEl, id) {
    const activePanel = tabsEl.querySelector('.tab-panel.is-active');
    const nextPanel = tabsEl.querySelector(`.tab-panel[data-panel="${id}"]`);

    // どちらかが見つからない場合は処理を中断する
    if (!activePanel || !nextPanel) return;

    // アニメーション中フラグを立てる（連打防止）
    tabsEl.classList.add('is-animating');

    const outer = tabsEl.querySelector('.tab-panels-outer');
    const startHeight = outer.offsetHeight;

    // タブボタンのアクティブ状態を切り替える
    tabsEl.querySelectorAll('.tab-list button.is-active').forEach(btn => btn.classList.remove('is-active'));
    tabsEl.querySelectorAll(`.tab-list button[data-tab="${id}"]`).forEach(btn => btn.classList.add('is-active'));

    // 現在のパネルを絶対配置にして、次のパネルの高さ計算に影響しないようにする
    Object.assign(activePanel.style, { position: 'absolute', left: '0', top: '0' });

    // 次のパネルを表示してから高さを測定する
    nextPanel.style.display = 'block';
    nextPanel.style.opacity = '0';

    const endHeight = outer.offsetHeight;

    // 外枠の高さをアニメーションさせる
    outer.animate([
      { height: `${startHeight}px` },
      { height: `${endHeight}px` }
    ], {
      duration: props.switchDuration,
      easing: props.switchEasing,
    });

    // 現在のパネルをフェードアウトさせる
    activePanel.animate([
      { opacity: 1 },
      { opacity: 0 }
    ], {
      duration: props.switchDuration,
      easing: props.switchEasing,
      fill: 'forwards',
    });

    // 次のパネルをフェードインさせる
    // アニメーション完了後に後処理を行う
    nextPanel.animate([
      { opacity: 0 },
      { opacity: 1 }
    ], {
      duration: props.switchDuration,
      easing: props.switchEasing,
      fill: 'forwards',
    }).onfinish = () => {
      // 高さを auto に戻す
      outer.style.height = 'auto';

      // 前のパネルを非表示にしてスタイルをリセットする
      activePanel.classList.remove('is-active');
      activePanel.style.display = 'none';
      Object.assign(activePanel.style, { position: 'static', opacity: '1' });

      // 次のパネルをアクティブにする
      nextPanel.classList.add('is-active');

      // アニメーション中フラグを解除する
      tabsEl.classList.remove('is-animating');
    };
  }

  return {
    init
  };
})();

tabs.init();

<!-- タブ全体のラッパー。data-tab-group でグループを識別する -->
<div class="tabs" data-tab-group="demo02">

  <!-- 上部タブ -->
  <ul class="tab-list tab-list--top">
    <!-- data-tab にパネルのIDを指定する -->
    <li><button type="button" data-tab="font">フォント<br class="only-sp">選定</button></li>
    <li><button type="button" data-tab="layout">レイアウト<br class="only-sp">設計</button></li>
    <li><button type="button" data-tab="image">画像<br class="only-sp">最適化</button></li>
    <li><button type="button" data-tab="performance">パフォー<br class="only-sp">マンス</button></li>
  </ul>

  <!-- パネルの外枠。高さのアニメーションはこの要素に対して行う -->
  <div class="tab-panels-outer">

    <!-- data-panel はタブの data-tab と対応させる -->
    <div class="tab-panel" data-panel="font">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

    <div class="tab-panel" data-panel="layout">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

    <div class="tab-panel" data-panel="image">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

    <div class="tab-panel" data-panel="performance">
      <!-- パネルの中身（任意のHTMLを記述） -->
    </div>

  </div><!-- /.tab-panels-outer -->

  <!-- 下部タブ。data-tab はタブ上部と同じ値を指定する -->
  <ul class="tab-list tab-list--bottom">
    <li><button type="button" data-tab="font">フォント<br class="only-sp">選定</button></li>
    <li><button type="button" data-tab="layout">レイアウト<br class="only-sp">設計</button></li>
    <li><button type="button" data-tab="image">画像<br class="only-sp">最適化</button></li>
    <li><button type="button" data-tab="performance">パフォー<br class="only-sp">マンス</button></li>
  </ul>

</div><!-- /.tabs -->

/* ブレイクポイント：768px以上をPC、767px以下をSPとして扱う */

/* ===== タブリスト共通 ===== */
.tab-list {
  display: flex;
}

@media (min-width: 768px) {
  .tab-list {
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .tab-list {
    gap: 5px;
  }
}

/* 各タブを均等幅に並べる */
.tab-list li {
  flex: 1;
}

/* タブボタンの共通スタイル */
.tab-list button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: #f8f8f8;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  /* 背景色・文字色の切り替えをなめらかにする */
  transition: background-color 500ms cubic-bezier(.215, .61, .355, 1), color 500ms cubic-bezier(.215, .61, .355, 1);
}

@media (min-width: 768px) {
  .tab-list button {
    height: 80px;
    font-size: 18px;
    line-height: 1.5;
  }
}

@media (max-width: 767px) {
  .tab-list button {
    height: 70px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* 矢印アイコン（::before 擬似要素で描画） */
.tab-list button::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  transition: transform 300ms cubic-bezier(.215, .61, .355, 1);
}

@media (min-width: 768px) {
  .tab-list button::before {
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-right: 3px solid #1a6bbf;
  }
}

@media (max-width: 767px) {
  .tab-list button::before {
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-right: 2px solid #1a6bbf;
  }
}

/* アクティブなタブのスタイル */
.tab-list button.is-active {
  background: #eef2f7;
  color: #1a6bbf;
}

/* ===== 上部タブ ===== */
.tab-list--top button {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

@media (min-width: 768px) {
  .tab-list--top button {
    padding: 0 0 18px;
  }
}

@media (max-width: 767px) {
  .tab-list--top button {
    padding: 0 0 15px;
  }
}

/* 上部タブの矢印は下向き（↓） */
.tab-list--top button::before {
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .tab-list--top button::before {
    bottom: 15px;
    border-bottom: 3px solid #1a6bbf;
  }
}

@media (max-width: 767px) {
  .tab-list--top button::before {
    bottom: 12px;
    border-bottom: 2px solid #1a6bbf;
  }
}

/* ホバー時に矢印を少し下にずらす */
@media (min-width: 768px) {
  .tab-list--top button:hover::before {
    transform: translateY(5px) rotate(45deg);
  }
}

/* ===== 下部タブ ===== */
.tab-list--bottom button {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

@media (min-width: 768px) {
  .tab-list--bottom button {
    padding: 18px 0 0;
  }
}

@media (max-width: 767px) {
  .tab-list--bottom button {
    padding: 15px 0 0;
  }
}

/* 下部タブの矢印は上向き（↑） */
.tab-list--bottom button::before {
  transform: rotate(-45deg);
}

@media (min-width: 768px) {
  .tab-list--bottom button::before {
    top: 15px;
    border-top: 3px solid #1a6bbf;
  }
}

@media (max-width: 767px) {
  .tab-list--bottom button::before {
    top: 12px;
    border-top: 2px solid #1a6bbf;
  }
}

/* ホバー時に矢印を少し上にずらす */
@media (min-width: 768px) {
  .tab-list--bottom button:hover::before {
    transform: translateY(-5px) rotate(-45deg);
  }
}

/* ===== パネル外枠 ===== */
/* overflow: hidden でアニメーション中にはみ出た要素を隠す */
.tab-panels-outer {
  position: relative;
  background: #eef2f7;
  overflow: hidden;
}

/* 各パネルは初期状態で非表示。JSで display: block に切り替える */
.tab-panel {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tab-panel {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .tab-panel {
    padding: 20px 15px;
  }
}

/* 以降、パネルの中身に関するスタイルは省略 */

const tabs = (() => {
  // アニメーションの設定
  const props = {
    switchDuration: 500, // アニメーション時間（ミリ秒）
    switchEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // イージング
  };

  function init() {
    // URLのクエリパラメータを取得する
    // 例）?demo02=layout の場合、"layout" タブを初期表示する
    const params = new URLSearchParams(location.search);

    document.querySelectorAll('.tabs').forEach((el) => {
      const groupId = el.dataset.tabGroup;
      const activeTab = params.get(groupId);

      // クエリパラメータに一致するパネルを探す
      const matchedPanel = activeTab ? el.querySelector(`.tab-panel[data-panel="${activeTab}"]`) : null;

      if (matchedPanel) {
        // 一致するパネルがあれば、そのタブをアクティブにする
        el.querySelectorAll(`.tab-list button[data-tab="${activeTab}"]`).forEach(btn => btn.classList.add('is-active'));
        matchedPanel.classList.add('is-active');
        matchedPanel.style.display = 'block';

      } else {
        // クエリパラメータがない場合は、1番目のタブをアクティブにする
        el.querySelectorAll('.tab-list li:nth-child(1) button').forEach(btn => btn.classList.add('is-active'));

        const panel = el.querySelector('.tab-panel:nth-child(1)');
        if (panel) {
          panel.classList.add('is-active');
          panel.style.display = 'block';
        }
      }
    });

    // タブボタンにクリックイベントを登録する
    document.querySelectorAll('.tab-list button').forEach((btn) => {
      btn.addEventListener('click', (e) => {
        const btn = e.currentTarget;
        const tabsEl = btn.closest('.tabs');
        const id = btn.dataset.tab;
        const topOffset = tabsEl.getBoundingClientRect().top;

        // スクロール位置がタブより上にある場合、タブの位置までスクロールする
        if (topOffset < 0) {
          scrollToY(window.scrollY + topOffset, props.switchDuration);
        }

        // アニメーション中・すでにアクティブなタブはスキップする
        if (!tabsEl.classList.contains('is-animating') && !btn.classList.contains('is-active')) {
          tabSwitch(tabsEl, id);
        }
      });
    });
  }

  // 指定した位置までなめらかにスクロールする関数
  function scrollToY(targetY, duration) {
    const startY = window.scrollY;
    const diff = targetY - startY;
    let startTime = null;

    function step(timestamp) {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;
      const progress = Math.min(elapsed / duration, 1);
      // easeOutCubic のイージングを適用する
      const ease = 1 - Math.pow(1 - progress, 3);
      window.scrollTo(0, startY + diff * ease);
      if (elapsed < duration) requestAnimationFrame(step);
    }

    requestAnimationFrame(step);
  }

  // タブを切り替える関数
  function tabSwitch(tabsEl, id) {
    const activePanel = tabsEl.querySelector('.tab-panel.is-active');
    const nextPanel = tabsEl.querySelector(`.tab-panel[data-panel="${id}"]`);

    // どちらかが見つからない場合は処理を中断する
    if (!activePanel || !nextPanel) return;

    // アニメーション中フラグを立てる（連打防止）
    tabsEl.classList.add('is-animating');

    const outer = tabsEl.querySelector('.tab-panels-outer');
    const startHeight = outer.offsetHeight;

    // タブボタンのアクティブ状態を切り替える（上部・下部タブ両方）
    tabsEl.querySelectorAll('.tab-list button.is-active').forEach(btn => btn.classList.remove('is-active'));
    tabsEl.querySelectorAll(`.tab-list button[data-tab="${id}"]`).forEach(btn => btn.classList.add('is-active'));

    // 現在のパネルを絶対配置にして、次のパネルの高さ計算に影響しないようにする
    Object.assign(activePanel.style, { position: 'absolute', left: '0', top: '0' });

    // 次のパネルを表示してから高さを測定する
    nextPanel.style.display = 'block';
    nextPanel.style.opacity = '0';

    const endHeight = outer.offsetHeight;

    // 外枠の高さをアニメーションさせる
    outer.animate([
      { height: `${startHeight}px` },
      { height: `${endHeight}px` }
    ], {
      duration: props.switchDuration,
      easing: props.switchEasing,
    });

    // 現在のパネルをフェードアウトさせる
    activePanel.animate([
      { opacity: 1 },
      { opacity: 0 }
    ], {
      duration: props.switchDuration,
      easing: props.switchEasing,
      fill: 'forwards',
    });

    // 次のパネルをフェードインさせる
    // アニメーション完了後に後処理を行う
    nextPanel.animate([
      { opacity: 0 },
      { opacity: 1 }
    ], {
      duration: props.switchDuration,
      easing: props.switchEasing,
      fill: 'forwards',
    }).onfinish = () => {
      // 高さを auto に戻す
      outer.style.height = 'auto';

      // 前のパネルを非表示にしてスタイルをリセットする
      activePanel.classList.remove('is-active');
      activePanel.style.display = 'none';
      Object.assign(activePanel.style, { position: 'static', opacity: '1' });

      // 次のパネルをアクティブにする
      nextPanel.classList.add('is-active');

      // アニメーション中フラグを解除する
      tabsEl.classList.remove('is-animating');
    };
  }

  return {
    init
  };
})();

tabs.init();