グローバルナビゲーションで開いているページを示す、いわゆるカレント表示をするために、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サイトでは、グローバルナビゲーションやフッター部分などはファイルを共通化することが多いと思います。上記の方法を使えば、共通化したうえでカレント表示も実現可能です。