※※※URLが変更となりました。
以前のURLはこちら　（http://tam-tam.co.jp/tipsnote/javascript/post4875.html）
ブックマークをされている方はお手数ですが変更をお願いいたします。※※※
　

グローバルナビゲーションやサイドナビで、マウスオーバーとは別に現在地表示させたいときがあります。

クラスを追加してCSSで背景画像を置き換え、などはよく見るのですが
CSSではなくボタンの画像自体を置き換えたかったので作成しました。
（CSS置き換えもほぼ内容は変わらないので下に記述しました）
テンプレートでナビゲーションを一括管理している場合などにはすごく便利です。

（※注）このJavascriptは各フォルダのindexファイルのみに有効です。
（“test/”には有効ですが、“test/abc.html”などではハイライトされません）

コンテンツ構成は以下とします。

/css/common.css
/js/navi.js
/images/
/testA/index.html
/testB/index.html
/testC/index.html
/testD/index.html

【HTML】

今回はサイドナビゲーションのボタンを現在地表示したいと思います。

[sub_btn_a.gif]　という通常の画像と、
[sub_btn_a_on.gif]　という現在地用の画像を用意します。

<div id="subcontents">
    <ul class="list">
        <li><a href="/testA/"><img src="/images/sub_btn_a.gif" alt="A" width="193" height="56"></a></li>
        <li><a href="/testB/"><img src="/images/sub_btn_b.gif" alt="B" width="193" height="54"></a></li>
        <li><a href="/testC/"><img src="/images/sub_btn_c.gif" alt="C" width="193" height="54"></a></li>
        <li><a href="/testD/"><img src="/images/sub_btn_d.gif" alt="D" width="193" height="54"></a></li>
    </ul>
</div>

HTMLは特に変わったことはなく、普通にコーディングします。

【Javascript】

JQueryを読み込み、ナビゲーション用のJSを記述します。

//JQuery読み込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    if(location.pathname != "/") {
        var $path = location.href.split('/');
        var $endPath = $path.slice($path.length-2,$path.length-1);

        //どこをハイライトするか
        $('#subcontents ul.list li a[href$="'+$endPath+'/"]').addClass('active');

        var ovName = "_on";
        $("#subcontents ul.list li a.active img").each(function(){

            var self = $(this);
            //画像置換関数
            var imgChange = function (elm,str1,str2){
                elm.attr("src",self.attr("src").replace(new RegExp("^(\.+)"+str1+"(\\.[a-z]+)$"),"$1"+str2+"$2"));
            }

            $(function() {
                imgChange(self,"",ovName);
            });

        });
    };
});

↑をコンテンツに合わせて変更する点はおよそ2点、

//どこをハイライトするか
  $('#subcontents ul.list li a[href$="'+$endPath+'/"]').addClass('active');

まずはこちら。

“#subcontentsのlistというクラスのついたul要素以下のリンク”
が現在表示されているページと同じであれば
Aタグにactiveというクラスをつけます、ということです。

導入したいサイトのマークアップに合わせて適宜変更してください。

var ovName = "_on";
$("#subcontents ul.list li a.active img").each(function(){

こちらは

“#subcontentsのlistというクラスのついたul要素以下のリンク”で
activeというクラスが付いている画像（＝現在表示されているページ）
を　var ovName　で指定した文字列を付与して置き換えますよ、という部分です。
こちらもマークアップや画像のファイル名に合わせて変更してください。

サーバーにアップするとこのように、反映されます。

ちなみに、画像ではなく、CSSで現在地表示をする場合は
Javascriptは以下になります。

<script type="text/javascript">
$(function() {
    if(location.pathname != "/") {
        var $path = location.href.split('/');
        var $endPath = $path.slice($path.length-2,$path.length-1);
        $('#subcontents ul.list li a[href$="'+$endPath+'/"]').addClass('active');
    }
});
</script>

CSSにて

#subcontents ul.list li a.active {
    ＜現在地のときのスタイル指定＞
}

とすればOKです。

＜動作確認済　ブラウザ＞
windows：firefox3～12、IE6～9、chrome
mac：safari3、chrome、firefox12

今回のサンプルのデータはこちらからダウンロードできます。
サーバーに設置してご確認ください。
（ライセンスフリー）