前回のやつはどっちかと言うとローカルナビ用だったので今度はグローバルナビ用。
ナビに設定されているリンク先と表示中ページのディレクトリが一致した場合に画像を差し替える。

HTML

インクルードさせる場合はhead内に↓。

ナビ部分。普通にliで。

JS

配列にはディレクトリを設定

$(function(){
	var dir = ["/dir01/","/dir02/","/dir03/","/dir04/","/dir05/"];
	var url = location.href;
	$.each(dir,function(i){	
		if(url.indexOf(dir[i]) !== -1){
			$("#g_nav li img").eq(i).attr('src',
				$("#g_nav li img").eq(i).attr("src").replace("_off.", "_on.")
			);
		}
	});
});

画像じゃなくてCSSでやる場合は

	$("#g_nav li img").eq(i).attr('src',
		$("#g_nav li img").eq(i).attr("src").replace("_off.", "_on.")
	);

↑こいつを↓こうして「active」クラスがつくように。

	$("#g_nav li").eq(i).addClass('active');

CSSは場面に合わせて適当に。

jQuery

• 
• Tweet