【カレント表示】現在のページのみメニューのデザインを変更する方法

ヘッダーメニューなどで、現在のページのみ色を変更したい!といった悩みにお答えします。

この記事ではjQueryJavaScript(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(Vanilla JS)

jQuery

まずはjQueryから。

// カレント表示
href = location.href;

var links = jQuery(".header-nav__item > a");

links.each(function (index, value) {
	if (value.href == href) {
		jQuery(".header-nav__item").eq(index).addClass("current");
});

現在のページのURLと、ナビのリンク(.header-nav__item > a)をすべて取得します。

もし、取得したURLと現在のページが一致していれば、.header-nav__itemcurrentのクラス名を追加するというものです。

あとはCSSでcurrentのデザインを調整すればOKです。

JavaScript(Vanilla JS)

JavaScript(Vanilla JS)の方も掲載しておきます。

// カレント表示
href = location.href;

var links = document.querySelectorAll(".header-nav__item > a");

for (var i = 0; i < links.length; i++) {
  if (links[i].href == href) {
    document.querySelectorAll(".header-nav__item")[i].classList.add("current");
	}
}

まとめ:カレント表示の方法

以上、jQuery / JavaScript(Vanilla JS)でカレント表示する方法の解説でした。

他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。

是非実装してみてください。

あと少しのカスタマイズでお困りではないですか?

スキルを身につけるなら、デイトラがおすすめです。

管理人

私はWeb制作とWebデザインを受講しました!

業界最安値で、学習内容もサポートも充実!
気になるコースがあれば是非覗いてみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次