【カレント表示】現在のページのみメニューのデザインを変更する方法
ヘッダーメニューなどで、現在のページのみ色を変更したい!といった悩みにお答えします。
この記事ではjQuery、JavaScript(Vanilla JS)両方を掲載しています。
目次
カレント表示のコード
HTML
HTMLはこのような構造です。
<ul class="header__nav">
<li class="header-nav__item">
<a href="index.html">ホーム</a>
</li>
<li class="header-nav__item">
<a href="page2.html">ページ2</a>
</li>
<li class="header-nav__item">
<a href="page3.html">ページ3</a>
</li>
</ul>
jQuery / JavaScript
jQuery、JavaScriptどちらでも好きな方で構いませんが、簡単なコードなのでパフォーマンス向上やコードの理解のために、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");
}
});
ナビのリンク(.header-nav__item > a
)を取得し、取得したURLと現在のページURLが一致していれば.header-nav__item
にcurrent
クラスを追加するというものです。
CSS
あとはCSSでcurrent
のデザインを調整すればOKです。
CSSの例
/* 通常時のCSSを書く */
.header-nav__item a {
color: #333;
}
/* カレント表示のCSSを書く */
.current.header-nav__item a {
color: blue;
}
まとめ:カレント表示の方法
以上、jQuery / JavaScript(Vanilla JS)でカレント表示する方法の解説でした。
他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。
是非実装してみてください。
【JavaScript】ページトップボタンの美しいスムーススクロール
JavaScript(Vanilla JS)を使ってページトップ戻るボタンの美しいスムーススクロールを実現します。 脱jQueryの第一歩としても良いのではないでしょうか。 【ページト…
おすすめWEBスクール
WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ!
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。
\ ここから飛べます! /
お気軽にコメントどうぞ