※※※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