BLOG

ブログ
  • Web制作

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

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

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>