jQueryで開いているページのナビゲーションにクラスを追加してカレント表示させる方法

jQueryで開いているページのナビゲーションにクラスを追加してカレント表示させる方法

jQueryで開いているページのナビゲーションにクラスを追加してカレント表示させる方法

グローバルナビゲーションで開いているページを示す、いわゆるカレント表示をするために、jQueryを使ってクラスを追加する方法をご紹介いたします。

WordPressの場合は、開いているページのナビゲーションには、.current_page_itemというクラスが追加されますが、通常の静的HTMLサイトではそうもいきませんので、jQueryで同じような機能を実現しようというお話です。

jQueryを使って開いているページのナビゲーションにクラスを追加する方法

まずHTMLは、以下のようによくあるナビゲーションで説明いたします。

<ul class="global-nav">
  <li><a href="index.html">トップページ</a></li>
  <li><a href="service.html">サービス</a></li>
  <li><a href="company.html">会社概要</a></li>
  <li><a href="contact.html">お問い合わせ</a></li>
</ul>

jQueryは、以下のように記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('.global-nav li a').each(function(){
    var target = $(this).attr('href');
    if(location.href.match(target)) {
      $(this).parent().addClass('current');
    } else {
      $(this).parent().removeClass('current');
    }
  });
});
</script>

まずjQuery本体を読み込み、ナビゲーション内のa要素からリンク先を取得しています。「.global-nav li a」のナビゲーションを指定する箇所は、環境に合わせて変更してください。

開いているページとマッチすれば、a要素の親であるli要素に「current」というクラスを追加します。そうでなければ、.currentは削除しています。

例えば、トップページが開かれている時は、以下のようにトップページのli要素に.currentが追加された状態となります。

<ul class="global-nav">
  <li class="current"><a href="index.html">トップページ</a></li>
  <li><a href="service.html">サービス</a></li>
  <li><a href="company.html">会社概要</a></li>
  <li><a href="contact.html">お問い合わせ</a></li>
</ul>

このように、開かれているページによって、.currentが付くli要素が変わるため、その部分だけCSSでスタイルを変更できるようになります。

あとがき

静的HTMLサイトでは、グローバルナビゲーションやフッター部分などはファイルを共通化することが多いと思います。上記の方法を使えば、共通化したうえでカレント表示も実現可能です。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です