別ページから特定のタブが開いた状態へダイレクトリンク

1ページの中でコンテンツの切り替え表示ができる「タブ」。

便利なので使うことも多いですが、通常、他のページからタブページへ遷移した時は1つ目のタブがアクティブな状態になっています。

ただ、場合によっては2つ目のタブへ直接リンクで飛ばしたい時もあります。

そんな時のコーディング例です。

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

《CSS》でタブの見た目を整えます。

.tab_box .btn_area {
	display: flex;
    gap: 10px;
    justify-content: center;
}

.tab_box .tab_btn {
	width: 180px;
	padding: 8px 0;
	color: #333;
	background: #f5f7f8;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease 0s;
}

.tab_box .tab_btn:hover {
	background-color: #dce1e4;
}

.tab_box .tab_btn.active {
	background: #07539f;
	color: #fff;
}

.tab_box .panel_area {
	border: solid 1px #e3ebf3;
	padding: 20px;
}

.tab_box .tab_panel {
	display: none;
}

.tab_box .tab_panel.active {
	display: block;
}

《JS》JavaScript でタブ機能を実装します。

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

《JS》特定のタブへダイレクトリンクできるようにスクリプトを記述します。

$(function () {
	//タブへダイレクトリンクの実装
	//リンクからハッシュを取得
	var hash = location.hash;
	hash = (hash.match(/^#tab_panel-\d+$/) || [])[0];

	//リンクにハッシュが入っていればtabnameに格納
	if ($(hash).length) {
		var tabname = hash.slice(1);
	} else {
		var tabname = "tab_panel-1";
	}

	//コンテンツ非表示・タブを非アクティブ
	$(".tab_box .tab_btn").removeClass("active");
	$(".tab_box .tab_panel").removeClass("active");

	//何番目のタブかを格納
	var tabno = $(".tab_box .tab_panel#" + tabname).index();

	//コンテンツ表示
	$(".tab_box .tab_panel").eq(tabno).addClass("active");

	//タブのアクティブ化
	$(".tab_box .tab_btn").eq(tabno).addClass("active");
});

《HTML》後は他のページに特定のタブコンテンツへのリンクを設置します。

<div class="link">
    <a href="./tab.html#tab_panel-2"></a>
</div>

IPPEI FUKUTA

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