jqueryでカテゴリごとにメニューの画像を切り替えるTips

全ページに共通のグローバルナビゲーションがある場合、私はphpのincludeを利用して、navi.txtとか作ってそれを全ページに使いまわすということを結構やります。
非常に便利というか、修正がある場合でも1つのファイルを修正するだけで済むという手間要らずな感じが大好きなのですが、カテゴリごとにメニューの画像を切り替えるのが面倒くさいんですよね。
例えば「about」のカテゴリーのページを開いた場合はグローバルメニューの「about」の画像のみがonになるとか。

で、それをjqueryを使って何とかならないかなと思ってやってみました。

例えばHTMLがこんな感じだったとします。メニューの画像はそれぞれ_off.gifと_on.gifの2つを用意。

<div id="GlobalNavigation">
  <ul>
    <li class="about"><img src="images/about_off.gif" alt="about" /></li>
    <li class="gallery"><img src="images/gallery_off.gif" alt="gallery" /></li>
    <li class="link"><img src="images/link_off.gif" alt="link" /></li>
  </ul>
</div>

そして、javascriptの方が、こんな感じ。

$(document).ready(function(){
  //パス取得
  path = location.pathname

  if(path.match("/about/")){
    $("#GlobalNavigation .about img").remove()
    $(#GlobalNavigation .about").prepend('<img src="images/about_on.gif" alt="about" />')
  }else if(path.match("/gallery/")){
    $("#GlobalNavigation .gallery img").gallery()
    $("#GlobalNavigation .gallery").prepend('<img src="images/gallery_on.gif" alt="gallery" />')
  }else if(path.match("/link/")){
    $("#GlobalNavigation .link img").remove()
    $("#GlobalNavigation .link").prepend('<img src="images/link_on.gif" alt="link" />')
  }
})

まず、path = location.pathnameで、現在開いているページのパスをpathという変数に代入します。
このとき取得できるパスは、ルート以下の部分となります。

そして、path.match(検索文字列)でpathの中に検索文字列が含まれるか調べます。
含まれていたらtrueを返すので、これをif文の条件としてそれぞれ分岐させます。

あとは、<li>のclassを目印として_off.gifの削除、そして_on.gifの挿入を行うという流れです。

ただ、このスクリプトだとメニュー項目が増えるたびにごちゃごちゃ書き加えないといけないので、手間です。
もっとオブジェクト化して引数渡すだけでチャチャッとできるようにすると使い勝手も良くなるんですが。
残念なことに私にはそこまでjavascriptの知識がありません…。

  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。