【カレント表示】現在のページのみメニューのデザインを変更する方法
ヘッダーメニューなどで、現在のページのみ色を変更したい！といった悩みにお答えします。
この記事ではjQuery、JavaScript（Vanilla JS）両方を掲載しています。
カレント表示のコード
HTML
HTMLはこのような構造です。
<ul class="header-nav">
<li class="header-nav__item"><a href="/">HOME</a></li>
<li class="header-nav__item"><a href="/about/">ABOUT</a></li>
<li class="header-nav__item"><a href="/work/">WORK</a></li>
</ul>jQuery / JavaScript
jQuery、またはJavaScriptを使った基本的な実装例は次のとおりです。
jQuery
// カレント表示
const links = jQuery(".header-nav__item > a");
links.each(function () {
if (this.href === location.href) {
jQuery(this).closest(".header-nav__item").addClass("current");
}
});JavaScript
// カレント表示
const links = document.querySelectorAll(".header-nav__item > a");
links.forEach(function (link) {
if (link.href === location.href) {
link.closest(".header-nav__item").classList.add("current");
}
});各ページのリンクを取得し、それぞれのhref属性と現在のページのURL（location.href）を比較してcurrentクラスを追加しています。
ただし、この比較は末尾にスラッシュがあるURLで行われるため、リンクのhrefにスラッシュがないと一致しません。
<!-- 一致しない例（末尾にスラッシュがない） -->
<a href="/about">ABOUT</a>
<!-- 一致する例（末尾にスラッシュあり） -->
<a href="/about/">ABOUT</a>また、URLにクエリパラメータ（例：?id=123）やハッシュ（例：#section1）がついている場合にも一致しません。
シンプルなサイトであれば上記のコードでも問題ありませんが、より柔軟に対応するため少し改良します。
改良したJavaScript
// カレント表示
const links = document.querySelectorAll(".header-nav__item > a");
links.forEach(link => {
if (
// 外部リンクを除外して比較
link.origin === location.origin &&
// 末尾のスラッシュを削除して比較
link.pathname.replace(/\/$/, "") === location.pathname.replace(/\/$/, "")
) {
link.closest(".header-nav__item").classList.add("current");
}
});これでスラッシュの有無関係なく、同じページ内であればカレントクラスが追加されるようになります。
外部リンクを除外しているのは、「同じパスを持つ別のサイトのリンク」に誤って一致しないようにするためです。
例えば、現在のページがhttps://example.com/blog/の場合、以下のような外部リンクにも誤ってcurrentクラスが付いてしまうことがあります。
<!-- 外部リンクでもカレントがついてしまう -->
<li class="header-nav__item current">
<a href="https://other.com/blog/">過去のブログ</a>
</li>このため、外部リンクはドメイン（origin）が同じかどうかで判定して除外することで、誤判定を防いでいます。
CSS
あとはCSSでcurrentのデザインを調整すればOKです。
CSSの例
/* 通常時 */
.header-nav__item a {
color: #333;
}
/* カレント表示 */
.header-nav__item.current a {
color: blue;
}まとめ：カレント表示の方法
以上、カレント表示する方法の解説でした。
他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。
是非実装してみてください。
おすすめWEBスクール
WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。
＼ クリックしてジャンプ！ ／
お気軽にコメントどうぞ