2012-04-10

[jQuery] ナビゲーションで現在のページ(カレントページ)の画像を変更する

ナビゲーションメニューで、現在のページ(カレントページ)の場合は、
該当メニューの画像を変更してどのページにいるかわかりやすくする、というやり方です。
これまでも普通にやっていたのですが、あらためてどうするのが楽か、というのも含めて。


やり方はいろいろあるのですが、jQueryを使って、
カレントページの場合には、aタグのクラスに「selected」というクラスを追加するという方法です。

現在のページの取得をどのようにするか、というのがサイトによって階層の問題など、
いろいろ変わると思います。
今回は採用しませんでしたが、「jQuery-URL-Parser」というプラグインを使うやり方もあります。


Javascript
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#mainnavi li a').each(function(){
var $href = $(this).attr('href');
if(location.href.match($href)) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
});
</script>


HTML
<ul id="mainnavi">
<li id="navi_news"><a href="news/">NEWS</a></li>
<li id="navi_item"><a href="item/">ITEM</a></li>
<li id="navi_blog"><a href="blog/">BLOG</a></li>
<li id="navi_shop"><a href="shop/">SHOP LIST</a</li>
<li id="navi_mail"><a href="mail/">MAIL MAGAZINE</a></li>
</ul>


CSS
#mainnavi li#navi_news a {
display:block;
width:96px;
height:95px;
background:url('/images/navi.gif') no-repeat;
}
#mainnavi li#navi_news a:hover {
display:block;
width:96px;
height:95px;
background:url('/images/navi.gif') no-repeat 0 -95px;
}
#mainnavi li#navi_news a.selected {
display:block;
width:96px;
height:95px;
background:url('/images/navi.gif') no-repeat 0 -190px;
}


参考サイト
http://blog.mach3.jp/2010/04/js-activate-navigation.html
http://depthcode.com/2010/12/url-parser.html

Comment:

Trackback URL: