【jQuery】アクセス時に任意のタブメニューを開いた状態にする小技

近頃はタブメニューもHTMLとCSSだけで再現する風潮になってきましたが、ちょっと気の利いたことをやろうとするとまだJSで対応する場面もあります。

そんなわけで、ページを読み込んだ時に、URLパラメーターによって初期表示されるタブメニューを変更する方法のメモ。

URLパラメータによって初期表示タブを切り替える

↓こういうやつ

デモページ（tab2を開いた状態に遷移）

jQueryで書いていく。

初期表示のために、必要な処理は以下。

URLパラメーターを取得する
URLパラメーターによって開くタブを設定
アクセス時に、URLパラメーターと設定したパラメーター合致したら表示タブを変更する

今回はタブの切り替え自体もJSで済ませています。

やったこと

ソースを順番に書いていく。

HTML

headタグや関係ないところは省略してます。

<div class="tabs">
	<!--メニュー部分-->
	<div class="tabs__menu">
		<div class="tabs__menu-item js-tab-switch is-active" data-tab="tab-1">tab1</div>
		<div class="tabs__menu-item js-tab-switch" data-tab="tab-2">tab2</div>
		<div class="tabs__menu-item js-tab-switch" data-tab="tab-3">tab3</div>
	</div>
	<!--//メニュー部分-->
	<!--コンテンツ部分-->
	<div class="tabs__contain">
		<div class="tabs__body js-tab-cts is-active" data-tab="tab-1">
			コンテンツ1
		</div>
		<div class="tabs__body js-tab-cts" data-tab="tab-2">
			コンテンツ2
		</div>
		<div class="tabs__body js-tab-cts" data-tab="tab-3">
			コンテンツ3
		</div>
	</div>
	<!--//コンテンツ部分-->
</div>

3〜7行目がメニュー部分、10〜20行目がコンテンツ部分。

ポイント

メニュー項目にはそれぞれ「js-tab-switch」クラスを設定
コンテンツのボックスにはそれぞれ「js-tab-cts」クラスを設定
デフォルトで開いておくメニュー、コンテンツに「is-active」クラスを設定
メニュー項目とコンテンツの紐付けには「data-tab」属性で対応

CSS（SCSS）

.tabs {
	&__menu {
		display: flex;
		justify-content: space-between;
		border-bottom: 5px solid #bababa;
	}
	&__menu-item {
		width: calc( 100% / 3 - 4px );
		margin-bottom: -5px;
		padding: 16px 20px;
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.5;
		color: #fff;
		border-top-left-radius: 10px;
		background: #bababa;
		cursor: pointer;
		&.is-active {
			background: #1088d4;
			cursor: default;
		}
	}
	&__body {
		display: none;
		background: #eff6fb;
		padding: 60px 48px 80px;
		&.is-active {
			display: block;
		}
	}
}

主に見た目を整えているだけだけ。

ポイント

「tabs__menu-item」と「tabs__body」に「display: none;」を設定し、
「is-active」クラスもある時は「display: block」を設定。

表示非表示を切り替えられるようにしておく。

JavaScript（jQuery）

jQueryは読み込んだ状態にしておく（デモページはバージョン3.5.1）

1.パラメータの値を取得するfunctionを設定

function getParam(name, url) {
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, "\\$&");
	let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
		results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, " "));
}

一度取得したURLを変数に設定後、「name」引数に記述したURLパラメーターのイコール以降の文字列のみに置き換えるfunctionを設定。

2.URLパラメーターによって開くタブを設定

let pram = getParam('active-tab');
if (pram && $('[data-tab="' + pram + '"]').length) {
	$('.js-tab-cts,.js-tab-switch').removeClass('is-active');
	$('[data-tab="' + pram + '"]').addClass('is-active');
}

行目。現在URLのパラメーター「active-tab」の値を変数に設定。

2〜5行目。
もし現在URLにパラメーター「active-tab」があって、URLパラメーターに合致するdata-tabが存在したら、一度タブ関連の「is-active」クラスを取り除いて、合致したタブメニュー・タブコンテンツに「is-active」クラスを追加する。

3.通常のタブ切り替えもできるようにしておく

$('.js-tab-switch').on('click', function() {
	let dataPram = $(this).data('tab');
	$('.js-tab-cts,.js-tab-switch').removeClass('is-active');
	$('[data-tab="' + dataPram + '"]').addClass('is-active');
});

最終的なJS

1〜3を合わせるとこんな感じになる

$(function() {
	// パラメータ取得
	function getParam(name, url) {
		if (!url) url = window.location.href;
		name = name.replace(/[\[\]]/g, "\\$&");
		let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
			results = regex.exec(url);
		if (!results) return null;
		if (!results[2]) return '';
		return decodeURIComponent(results[2].replace(/\+/g, " "));
	}

	// ページ読み込み時のタブ切り替え
	let pram = getParam('active-tab');
	if (pram && $('[data-tab="' + pram + '"]').length) {
		$('.js-tab-cts,.js-tab-switch').removeClass('is-active');
		$('[data-tab="' + pram + '"]').addClass('is-active');
	}

	// ロード後のタブ切り替え
	$('.js-tab-switch').on('click', function() {
		let dataPram = $(this).data('tab');
		$('.js-tab-cts,.js-tab-switch').removeClass('is-active');
		$('[data-tab="' + dataPram + '"]').addClass('is-active');
	});
});

もっとスマートな記述があるかもですが、何かの参考になれば幸いです。では、よいJQueryライフを。