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

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

jQueryを使って、開いているページ(現在地)のナビゲーションにクラスを追加する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 次世代の暗号通貨投資法!初心者でも!どなたでも年利36.27% ⁉︎
  • このエントリーをはてなブックマークに追加

グローバルナビゲーションで開いているページを示す、いわゆるカレント表示をするために、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 $href = $(this).attr('href');
if(location.href.match($href)) {
$(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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。