タブ内コンテンツへ直接リンクする方法｜特定タブを開いて表示する（jQuery）

公開日: 2025.06.26
最終更新日: 2026.07.17

タブ切り替え式のコンテンツで、「このリンクをクリックしたら、目的のタブが開いた状態で表示してほしい」——FAQやサービス紹介ページでよくある要望です。

結論から言うと、これはタブとコンテンツをIDで結び付け、リンクのhrefに指定したハッシュ値をJavaScriptで読み取って対象タブをアクティブにすることで実現できます。この記事では、HTML・CSS・JavaScript（jQuery）を使った具体的な実装手順を、順を追って解説します。

1 なぜタブ内へのアンカーリンクに一工夫が必要なのか
2 基本のHTML構造
3 タブ切り替えの基本実装
4 特定タブへのダイレクトリンクを実装する
5 ダイレクトリンクの作り方
6 応用：URLのハッシュで直接タブを開く
7 つまずきやすいポイント
8 まとめ

なぜタブ内へのアンカーリンクに一工夫が必要なのか

タブUIは情報をカテゴリーごとに整理できるため、ページをすっきり見せながら多くの内容を収められる便利な仕組みです。一方で、非表示のタブの中にあるコンテンツは、通常のアンカーリンク（#idへのジャンプ）だけでは表示できません。リンク先の要素がdisplay:noneで隠れているため、ジャンプしても何も見えないからです。

そこで、単に位置へジャンプさせるのではなく、「リンクがクリックされたらまず対象のタブを開く」という処理をJavaScriptで挟む必要があります。この一手間があるかどうかで、ユーザーが目的の情報にたどり着けるかが変わります。

基本のHTML構造

まずは土台となるタブのHTMLです。タブボタンと、それに対応するパネル（コンテンツ）を用意し、パネル側にはリンク先となるIDを振っておきます。

<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>

ポイントは、各パネルにtab_panel-1のような連番のIDを付けている点です。このIDが、あとでリンク先を指定する際の目印になります。

タブ切り替えの基本実装

次に、タブボタンをクリックしたら対応するパネルを表示する、基本のタブ切り替え処理です。クリックされたボタンの位置（何番目か）を取得し、同じ順番のパネルをactiveにしています。

// タブ機能の実装
$(".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");
});

タブとパネルの並び順が一致していれば、この数行だけで切り替えが動きます。ここまでが前提となる仕組みです。

特定タブへのダイレクトリンクを実装する

いよいよ本題です。hrefが#tab_panelで始まるリンクがクリックされたら、その値に対応するタブを開くようにします。

//タブコンテンツへダイレクトリンクの実装
$('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-数字の形式かどうかを正規表現でチェックします。該当するIDが存在すればそのパネルを、なければ1番目のパネルを開くようにフォールバックを用意しているため、リンクの記述ミスがあっても表示が崩れません。あとは対象パネルの並び順（index()）を取得し、同じ順番のタブとパネルをactiveにしています。

ダイレクトリンクの作り方

ここまで実装できたら、あとは次のようなリンクを置くだけです。ページ内の目次や、別のセクションのボタンなどから、目的のタブへ直接誘導できます。

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

リンク先を#tab_panel-3に変えれば3番目のタブ、というように、IDを指定するだけで開くタブを自由に切り替えられます。

応用：URLのハッシュで直接タブを開く

ここまでは同一ページ内のリンクを想定してきましたが、実務では「別ページから特定のタブを開いた状態でアクセスさせたい」というケースもあります。その場合は、ページ読み込み時にURLのハッシュ（例：https://example.com/faq/#tab_panel-2）を読み取って、対応するタブを開く処理を追加します。

// ページ読み込み時にURLのハッシュで該当タブを開く
$(window).on("load", function () {
    var hash = location.hash;
    if (hash.match(/^#tab_panel-\d+$/) && $(hash).length) {
        var tabno = $(hash).index();
        $(".tab_box .tab_btn, .tab_box .tab_panel").removeClass("active");
        $(".tab_box .tab_panel").eq(tabno).addClass("active");
        $(".tab_box .tab_btn").eq(tabno).addClass("active");
    }
});

これを加えておくと、メールや他ページに貼ったリンクからでも、目的のタブが開いた状態でページを表示できます。同一ページ内のリンクと外部からのアクセス、両方に対応させておくと安心です。

つまずきやすいポイント

実装時に見落としがちな点が3つあります。1つ目はjQueryの読み込みです。上記のコードはjQueryを前提としているため、事前に読み込んでおく必要があります。2つ目はタブとパネルの並び順です。index()で位置をそろえて動かしているため、ボタンとパネルの順番が食い違うと、意図しないタブが開いてしまいます。3つ目は2つの処理を両方とも読み込むことです。基本のタブ切り替えとダイレクトリンクの処理は役割が別なので、どちらか一方だけだと動作が片手落ちになります。