【カレント表示】現在のページのみメニューのデザインを変更する方法
ヘッダーメニューなどで、現在のページのみ色を変更したい！といった悩みにお答えします。
この記事では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で行われるため、以下のような場合には一致しません。
- /about（末尾にスラッシュがない）
- /about/?id=123（クエリパラメータがついている）
- /about/#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");
}
});このコードは、現在のページと同じリンクにだけcurrentクラスを付与します。
- 外部リンクを除外して、同じドメイン内のリンクだけを対象
- スラッシュの有無を無視してパスを比較
外部リンクを除外しているのは、パスだけを比べると外部サイトも一致してしまうという問題があるためです。
同一ページとして誤判定される例
- 現在のページ：
https://example.com/blog/ - メニュー内の外部リンク：
https://other.com/blog/
ドメイン（origin）も一致するかを条件に加えることで、同一サイト内のリンクだけをカレント扱いにし、外部リンクには誤って付かないようにしています。
CSS
あとはCSSでcurrentのデザインを調整すればOKです。
CSSの例
/* 通常時 */
.header-nav__item a {
color: #333;
}
/* カレント表示 */
.header-nav__item.current a {
color: blue;
}まとめ：カレント表示の方法
以上、カレント表示する方法の解説でした。
他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。
是非実装してみてください。
あわせて読みたい
【JavaScript】ページトップボタンの美しいスムーススクロール
JavaScript（Vanilla JS）を使ってページトップ戻るボタンの美しいスムーススクロールを実現します。 脱jQueryの第一歩としても良いのではないでしょうか。 ページトッ…
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いはPayPay・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ