ヘッダーメニューなどで、現在のページのみ色を変更したい！といった悩みにお答えします。
この記事では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">ページ２</a>
</li>
<li class="header-nav__item">
<a href="page3.html">ページ３</a>
</li>
</ul>jQuery / JavaScript（Vanilla JS）
jQuery
まずはjQueryから。
// カレント表示
const links = jQuery(".header-nav__item > a");
links.each(function () {
if (this.href === location.href) {
jQuery(this).closest(".header-nav__item").addClass("current");
}
});現在のページのURLと、ナビのリンク（.header-nav__item > a）をすべて取得します。
もし、取得したURLと現在のページが一致していれば、.header-nav__itemにcurrentのクラス名を追加するというものです。
あとはCSSでcurrentのデザインを調整すればOKです。
.header-nav__item a {
// 通常時のCSSを書く
}
.current .header-nav__item a {
// 現在のページの時のCSSを書く
}JavaScript（Vanilla JS）
JavaScript（Vanilla JS）の方も掲載しておきます。
// カレント表示
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");
}
});コードの長さや複雑さも変わらないので、基本的にはパフォーマンス向上やコードの理解のために、jQueryではなく純粋なJavaScriptの記述をおすすめします。
まとめ：カレント表示の方法
以上、jQuery / JavaScript（Vanilla JS）でカレント表示する方法の解説でした。
他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。
是非実装してみてください。
カスタマイズを自分でしてみませんか？
「あの機能追加したいな」「もう少しここを調整したいな」と思ったらWeb制作のスクール「デイトラ」がおすすめです…！
カリキュラムは３ヶ月分ですが、受講生は卒業後もずっと見放題！常に最新のコンテンツに更新されるため、情報が古くなるなんてこともありません。
価格はどのコースも10万円前後と他のスクールに比べても格安です。
なのに副業・転職に十分なスキルが身につきます。
管理人私はWeb制作とWebデザインを受講し、現在フリーランスWebデザイナーとなりました。
他にも様々なコースが充実しているので、身につけたいスキルがあったら是非覗いてみてください。
コースの一部をご紹介
コメント