1ページ内でコンテンツを切り替えられる「タブ」は便利で、よく使うUIです。ただ通常は、他のページからタブのあるページへ遷移すると、必ず1つ目のタブがアクティブな状態で表示されます。場合によっては「別ページのリンクをクリックしたら、2つ目のタブが開いた状態で表示したい」ということもあります。この記事では、URLのハッシュ（#）を使って、別ページから特定のタブを開いた状態にダイレクトリンクする方法を、HTML・CSS・JavaScriptのコード付きで解説します。

HTML：タブの構造を作る

まず、タブの切り替えボタンと、それぞれのタブコンテンツを用意します。各タブコンテンツには識別用のIDを指定しておきます。ボタン側のdata-tabと、コンテンツ側のidを対応させるのがポイントです。

<div class="tab">
  <ul class="tab__nav">
    <li><button class="tab__btn is-active" data-tab="tab1">タブ1</button></li>
    <li><button class="tab__btn" data-tab="tab2">タブ2</button></li>
    <li><button class="tab__btn" data-tab="tab3">タブ3</button></li>
  </ul>

  <div class="tab__content is-active" id="tab1">タブ1の内容</div>
  <div class="tab__content" id="tab2">タブ2の内容</div>
  <div class="tab__content" id="tab3">タブ3の内容</div>
</div>

CSS：タブの見た目を整える

アクティブなタブだけを表示し、それ以外は隠します。is-activeクラスが付いた要素を表示する形です。

.tab__nav {
  display: flex;
  list-style: none;
  padding: 0;
}
.tab__btn {
  padding: 10px 20px;
  border: none;
  background: #eee;
  cursor: pointer;
}
.tab__btn.is-active {
  background: #00608d;
  color: #fff;
}

/* コンテンツは通常非表示、アクティブなものだけ表示 */
.tab__content {
  display: none;
  padding: 20px;
}
.tab__content.is-active {
  display: block;
}

JavaScript：タブの切り替え機能を実装する

タブボタンをクリックしたら、対応するコンテンツに切り替える処理です。クリックされたボタンと、そのdata-tabに対応するコンテンツにだけis-activeを付けます。

const tabButtons = document.querySelectorAll(".tab__btn");
const tabContents = document.querySelectorAll(".tab__content");

function activateTab(tabId) {
  tabButtons.forEach((btn) => {
    btn.classList.toggle("is-active", btn.dataset.tab === tabId);
  });
  tabContents.forEach((content) => {
    content.classList.toggle("is-active", content.id === tabId);
  });
}

tabButtons.forEach((btn) => {
  btn.addEventListener("click", () => {
    activateTab(btn.dataset.tab);
  });
});

JavaScript：URLのハッシュで特定のタブを開く

ここが本題です。ページを読み込んだときにURLのハッシュ（#tab2など）をチェックし、該当するタブがあればそれをアクティブにします。これで、別ページから#tab2付きのURLでアクセスすると、2つ目のタブが開いた状態で表示されます。

window.addEventListener("DOMContentLoaded", () => {
  const hash = window.location.hash.replace("#", "");
  if (hash && document.getElementById(hash)) {
    activateTab(hash);
  }
});

上のタブ切り替えのコードと合わせて記述してください。DOMContentLoadedのタイミングでハッシュを見て、該当するIDのタブがあればアクティブにする、という流れです。存在しないハッシュが付いていても、document.getElementByIdのチェックで弾かれるので、その場合は通常通り1つ目のタブが表示されます。

HTML：別ページにダイレクトリンクを設置する

あとは、リンク元となる別ページに、開きたいタブのIDをハッシュとして付けたリンクを設置するだけです。

<!-- タブページのURLが /tab-page/ の場合 -->
<a href="/tab-page/#tab2">2つ目のタブを開く</a>
<a href="/tab-page/#tab3">3つ目のタブを開く</a>

このリンクをクリックすると、タブページに遷移すると同時に、指定したタブが開いた状態で表示されます。

まとめ

別ページから特定のタブを開いた状態でリンクするには、URLのハッシュを利用します。ページ読み込み時にwindow.location.hashをチェックして該当タブをアクティブにする処理を加えれば実現できます。タブUIはよく使うので、この仕組みを用意しておくと、キャンペーンページから特定タブへ誘導したいときなどに便利です。