![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
URLのパラメータをJavaScriptで取得し、CSSクラスを切り替える方法を解説します。
カテゴリーメニューなどで「現在の状態」をURLと連動して表現したい場合に便利な手法です。
仕組みの概要
URLパラメータを利用して、現在の状態に応じたCSSスタイルを切り替えます。
- URLにパラメータを付ける
- JavaScriptでパラメータを取得
- 該当する要素に
.is-activeクラスを付与 - CSSで見た目を切り替える
以下のデモURLで、実際の動作を確認できます。
HTML（リンクにパラメータを付ける）
|
1 2 3 4 5 |
<ul class="menu_class"> <li><a href="?クラス=ひかり">ひかり</a></li> <li><a href="?クラス=にじ">にじ</a></li> <li><a href="?クラス=ほし">ほし</a></li> </ul> |
クリックすると、URLは次のようになります。
|
1 |
https://example.com/index.html?クラス=にじ |
JavaScript（URLパラメータを取得）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> const params = new URLSearchParams(location.search); const activeClass = params.get('クラス'); if (activeClass) { document.querySelectorAll('.menu_class a').forEach(a => { if (a.textContent === activeClass) { a.classList.add('is-active'); } }); } </script> |
ポイント解説
URLSearchParams：URLについている「?以降の情報」を取り出すための仕組みlocation.search：?クラス=にじの部分textContentと比較することで、表示文字とURLを紐付け
CSS（アクティブ時のスタイル）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.menu_class { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; list-style-type: none; } .menu_class a { display: block; padding: 6px 14px; border-radius: 50px; border: 1px solid #6F9BDB; background-color: #fff; color: #6F9BDB; font-size: 20px; text-decoration: none; font-weight: bold; } .menu_class a.is-active { background-color: #6F9BDB; color: #fff; } |
.is-active クラスが付いた要素だけ、背景色と文字色が切り替わります。
まとめ
URLのパラメータを使うことで、現在の選択状態をURLと連動して表現できます。
JavaScriptで値を取得し、CSSクラスを切り替えるだけなので、
初心者でも理解しやすく、実務でも使いやすい方法です。
まずはデモを触りながら、URLと画面表示がどう連動しているかを確認してみてください。