グロナビなどのナビゲーションにステイ表示をさせるメモ【jQuery】

グロナビなどのナビゲーションにステイ表示をさせる場合があると思いますが、そのスクリプトのメモです。

ページ毎に異なるグロナビのHTMLを用意すればわざわざスクリプトを書く必要はないのですが、1ソースで行う場合にJavaScriptを書く必要性があります。

li要素にクラスを付加

URLのパスとli要素のa要素のリンクが同じであればアクティブ表示させるクラス(active)を付加するやり方です。jQueryのソースは下記になります。下記を参考にしました。

Using JavaScript to Style Active Navigation Elements

if(location.pathname != "/") {
	$('#globalnavi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
} else {
	$('#globalnavi a').eq(0).addClass('active');
}

ロールオーバーとactiveがついているli要素の画像を差し替える

グロナビのデザインをすべて画像で行う場合は、ロールオーバーで画像を差し替えなければならないので、下記のようなスクリプトを用意します。(マウスオンのときの画像をxxx_on.jpgとします。)

$('#globalnavi a').each(function(){
	if($(this).hasClass('active')) {
		$(this).children().attr("src", $(this).children().attr("src").replace(".jpg", "_on.jpg"));
	}
})
$('#globalnavi a').hover(function(){
		$(this).find('img').attr("src", $(this).find('img').attr("src").replace(".jpg", "_on.jpg"));
	},
	function(){
		$(this).find('img').attr("src", $(this).find('img').attr("src").replace("_on.jpg", ".jpg"));
})

このままだとactiveがついたli要素にもロールオーバーされてしまうので、activeがついたli要素にはロールオーバーをさせないようにします。

$(this).unbind("mouseenter").unbind("mouseleave");

上記を合体【謎】させたすべてのソースが下記です。

//activeを付ける
if(location.pathname != "/") {
	$('#globalnavi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
} else {
	$('#globalnavi a').eq(0).addClass('active');
};

//activeがついたli要素の画像を差し替え
$('#globalnavi a').each(function(){
	if($(this).hasClass('active')) {
		$(this).children().attr("src", $(this).children().attr("src").replace(".jpg", "_on.jpg"));
		//ロールオーバーを排除
		$(this).unbind("mouseenter").unbind("mouseleave");
	}
});

//ロールオーバー
$('#globalnavi a').hover(function(){
		$(this).find('img').attr("src", $(this).find('img').attr("src").replace(".jpg", "_on.jpg"));
	},
	function(){
		$(this).find('img').attr("src", $(this).find('img').attr("src").replace("_on.jpg", ".jpg"));
})