1. Home
  2. JavaScript
  3. jqueryでカテゴリごとにメニューの画像を切り替えるTips

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という変数に代入します。
このとき取得できるパスは、ルート以下の部分となります。
http://2inc.org/about/index.htmlなら、/about/index.htmlという感じ。

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

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

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

このページの先頭へ

関連のあるエントリー

ブックマーク

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

コメント（4）

chem
07/08/31 15:24

こんにちは、以前通りすがりでjQueryの記事にコメントしたものです。
↓のようなのでどうでしょうか。
カテゴリ名をちょちょっと追加するだけでいいようになってます。

$(document).ready(function(){
//グローバルナビ（ul#gnなども可）
var gNav = “#GlobalNavigation”;
//カテゴリ名… /tekitou/ なら tekitou
var gNavCat = ["about", "gallery", "link"];

var path = location.pathname;
for(var i=0, len=gNavCat.length; i’);
break;
}
}
})

自分のサイトでは、グローバルナビのマークアップにはimgを用いず、
テキストをCSSで画像に置換し、bodyに指定したclassによって
標準 / 現在のカテゴリを強調 / マウスホバーで強調 を切り替えることにしました。

chem
07/08/31 15:28

行頭のタブ文字が消えてしましましたね……。
適当に空白を補って考えてください。
ご参考までに。

chem
07/08/31 15:36

何度もすみません。
コピペミスではなく、どうも「」がサニタイズされたみたいです。
全角文字で書き直します……。

$(document).ready(function(){
//グローバルナビゲーションする要素のID
var gNav = “#GlobalNavigation”;

//カテゴリ名… /tekitou/ なら tekitou
var gNavCat = ["about", "gallery", "link"];

var path = location.pathname;
for(var i=0, len=gNavCat.length; i＜len; i++){
if(path.match(”/”+gNavCat[i]+”/”)) {
$(gNavID+” .”+gNavCat[i]+” img”).remove();
$(gNavID+” .”+gNavCat[i]).prepend(’＜img src=”images/’+gNavCat[i]+’_on.gif” alt=”‘+gNavCat[i]+’” /＞’); break;
}
}
})

inc
07/08/31 22:31

あー！配列を使ってループですね。基本的なアルゴリズムを忘れてました。どうもプログラムは苦手です…。これならだいぶ更新時の手間も省けますね。

コメントフォーム

トラックバック（0）

この記事のトラックバックURL
http://2inc.org/js/28.html/trackback

このページの先頭へ