2025.06.26(Thu)

Web制作

同一ページ内で特定タブ内のコンテンツにダイレクトアンカーリンクを設定する方法

1 はじめに
2 なぜタブ内へのアンカーリンクが必要なのか？
3 基本的なHTML構造
4 JavaScriptでタブ切り替えを実装
5 ダイレクトリンクの作成
6 まとめ

はじめに

Webサイトで「タブ切り替えコンテンツ」を使用している場合、訪問者が特定のタブを直接開いた状態でページにアクセスできたら便利ですよね。

たとえば、FAQページで「配送について」のタブに直接飛ばしたい場合、リンク先をクリックした瞬間にそのタブが自動的に開いて、その中の該当項目が表示されるという仕組みです。

この記事では、「同一ページ内で特定タブ内のコンテンツにダイレクトにアンカーリンクを設定する方法」について、HTML、CSS、JavaScriptを使って具体的に解説します。

なぜタブ内へのアンカーリンクが必要なのか？

タブ切り替え式のUIは、情報をカテゴリーごとに整理して表示できるため、ユーザーの利便性が高まります。

しかし、URLのハッシュ（例：#shipping）を使ってタブを切り替える処理が実装されていない場合、特定のタブコンテンツへリンクを貼ることができません。

ユーザーがページを開いたときに自動で該当タブが表示されるようにするには、JavaScriptでハッシュ値を読み取り、対応するタブをアクティブにする処理が必要になります。

基本的なHTML構造

まずは基本的なタブのHTML構造を確認しましょう。

《HTML》

<div class="tab_box">
	<div class="btn_area">
		<div class="tab_btn active">タブ1</div>
		<div class="tab_btn">タブ2</div>
		<div class="tab_btn">タブ3</div>
	</div>
	<div class="panel_area">
		<div id="tab_panel-1" class="tab_panel active">タブコンテンツ1</div>
		<div id="tab_panel-2" class="tab_panel">タブコンテンツ2</div>
		<div id="tab_panel-3" class="tab_panel">タブコンテンツ3</div>
	</div>
</div>

このように、各タブとそのコンテンツは対応するIDを持っています。

《JS》

// タブ機能の実装
$(".tab_box .tab_btn").click(function () {
    var index = $(".tab_box .tab_btn").index(this);
    $(".tab_box .tab_btn, .tab_box .tab_panel").removeClass("active");
    $(this).addClass("active");
    $(".tab_box .tab_panel").eq(index).addClass("active");
});

JavaScriptでタブ切り替えを実装

次に、クリックされたときに該当タブを表示するJavaScriptを用意します。

《JS》

//タブコンテンツへダイレクトリンクの実装
$('a[href^="#tab_panel"]').click(function () {
    var obj = $(this);
    var link = obj.attr("href");
    link = (link.match(/^#tab_panel-\d+$/) || [])[0];
    if ($(link).length) {
        var tabname = link.slice(1);
    } else {
        var tabname = "tab_panel-1";
    }
    //コンテンツ非表示・タブを非アクティブ
    $(".tab_box .tab_btn").removeClass("active");
    $(".tab_box .tab_panel").removeClass("active");
    //何番目のタブかを格納
    var tabno = $("#" + tabname).index();
    //コンテンツ表示
    $(".tab_box .tab_panel").eq(tabno).addClass("active");
    //タブのアクティブ化
    $(".tab_box .tab_btn").eq(tabno).addClass("active");
});

このスクリプトにより、hrefの値が#tab_panelで始まるaリンクをクリックした時に発火し、該当のタブコンテンツがactiveになるようになります。

ダイレクトリンクの作成

上記のコードを実装すれば、以下のようなリンクを外部や同一ページ内に作成することで、直接該当タブを開けるようになります。

《HTML》

<a href="#tab_panel-2">タブコンテンツ2へのリンク</a>

まとめ

タブ内コンテンツへのダイレクトアンカーリンクは、ユーザビリティの向上やSEO対策の一環としても有効です。今回ご紹介した方法を使えば、簡単にタブをIDに紐づけて、目的の情報へスムーズに誘導することができます。

ユーザーが欲しい情報に「最短距離」でアクセスできるように設計することは、UXの基本。少しの工夫で、より使いやすいサイト作りを目指していきましょう！

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。