ウェブページで特定のコンテンツを表示するために、
クエリパラメーターを利用することは非常に便利です。
この記事では、クエリパラメーターを使って特定のプランを表示する方法について詳しく説明します。
シナリオ
例えば、複数のプランを紹介するウェブサイトがあり、
ユーザーがURLに特定のパラメーターを追加することで、
特定のプランが表示されるようにしたいとします。
以下のようなリンクがあるとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プラン表示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="plan-nav newfamily">
<li class="plan-nav__item plan-nav__item--a"><a href="javascript:chg_plan('a');">プランA</a></li>
<li class="plan-nav__item plan-nav__item--b"><a href="javascript:chg_plan('b');">プランB</a></li>
<li class="plan-nav__item plan-nav__item--c"><a href="javascript:chg_plan('c');">プランC</a></li>
<li class="plan-nav__item plan-nav__item--d"><a href="javascript:chg_plan('d');">プランD</a></li>
<li class="plan-nav__item plan-nav__item--e"><a href="javascript:chg_plan('e');">プランE</a></li>
<li class="plan-nav__item plan-nav__item--f"><a href="javascript:chg_plan('f');">プランF</a></li>
<li class="plan-nav__item plan-nav__item--g"><a href="javascript:chg_plan('g');" id="special-link">特別プラン</a></li>
</ul>
<div class="plan_01-01 plan-detail-container">
<section class="plan-detail-header container" id="plan-a" style="display: none;">
<!-- 'a' プランのコンテンツ -->
<h2>プランA</h2>
<p>これはプランAの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-b" style="display: none;">
<!-- 'b' プランのコンテンツ -->
<h2>プランB</h2>
<p>これはプランBの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-c" style="display: none;">
<!-- 'c' プランのコンテンツ -->
<h2>プランC</h2>
<p>これはプランCの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-d" style="display: none;">
<!-- 'd' プランのコンテンツ -->
<h2>プランD</h2>
<p>これはプランDの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-e" style="display: none;">
<!-- 'e' プランのコンテンツ -->
<h2>プランE</h2>
<p>これはプランEの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-f" style="display: none;">
<!-- 'f' プランのコンテンツ -->
<h2>プランF</h2>
<p>これはプランFの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-g" style="display: none;">
<!-- 'g' プランのコンテンツ -->
<h2>特別プラン</h2>
<p>これは特別プランの詳細です。</p>
</section>
</div>
<script>
// ページ読み込み時にクエリパラメーターをチェックして表示を切り替える
$(document).ready(function() {
// 現在のURLからクエリパラメーターを取得
var params = new URLSearchParams(window.location.search);
var planParam = params.get('plan');
// planParam に基づいて表示を切り替える
if (planParam) {
chg_plan(planParam);
}
});
// chg_plan 関数の定義
function chg_plan(a) {
$('.plan-nav__item').removeClass('active');
$('.plan-nav__item--' + a).addClass('active');
$('.plan-detail-header').hide();
$('#plan-' + a).show();
}
</script>
</body>
</html>
コードの解説
ページ読み込み時にクエリパラメーターをチェック
ページが読み込まれると、$(document).ready()
関数が呼び出されます。
この関数は、ページのDOMが完全に読み込まれたときに実行されます。
URLからクエリパラメーターを取得
URLSearchParams
オブジェクトを使用して、現在のURLのクエリパラメーターを取得します。具体的には、window.location.search
を使ってURLのクエリ部分を取得し、params.get('plan')
でplan
パラメーターの値を取得します。
表示を切り替える関数の呼び出し
取得したパラメーターの値に基づいて、chg_plan
関数を呼び出します。例えば、URLがexample.com/?plan=g
の場合、chg_plan('g')
が実行されます。
chg_plan
関数の定義
chg_plan
関数は、特定のプランを表示するための関数です。まず、すべてのプランのナビゲーションアイテムからactive
クラスを削除し、指定されたプランのアイテムにactive
クラスを追加します。その後、すべてのプランの詳細セクションを非表示にし、指定されたプランの詳細セクションを表示します。
実際の使用例
例えば、以下のリンクをクリックすると、特定のプランが表示されます:
example.com/?plan=a
:プランAexample.com/?plan=b
:プランBexample.com/?plan=g
:特別プラン
まとめ
クエリパラメーターを使って特定のコンテンツを表示する方法は、
ユーザーに対して柔軟なナビゲーション体験を提供するのに非常に有効です。
今回紹介した方法を使えば、ユーザーが特定のプランを簡単に表示できるようになります。
ぜひ試してみてください。