jqueryでカテゴリごとにメニューの画像を切り替えるTips 2

以前にも一度書いてますが、汎用性0で非常に使いにくいものだったので、再度組み直し。良くわからないまま組んだけど、とりあえず動いているっぽいので公開します。

/*========================================

gnav画像を反転させるjquery plugin

========================================*/

function globalNaviCurrent() {
	var url = location.pathname
	var directory = url.split("/");

	if(directory[1]==''){
		var currentDirectory = "/";
	}else if(directory[1]=='category'){
		var currentDirectory = directory[2];
	}else{
		var currentDirectory = directory[1];
	}
	var currentA = $('#header #GlobalNavigation ul li a[@href$=' + currentDirectory + '] img');

	if(imgsrc = currentA.attr("src")){
		var kugiri = imgsrc.split("_n",2);
		var imgsrcCurrent = kugiri[0] + "_r" + kugiri[1];
		currentA.attr({ src: imgsrcCurrent });
	}
};
$(document).ready(globalNaviCurrent);

ルートの直後の階層のパスを取得して判別します（「https://2inc.org/web/html」だったら「web」）。一応wordpress用ってことで、カテゴリーページには「category」というパスが入るようだったので、その判別入れてます。

サイトに会わせて書き換えないといけないのは「currentA」に渡す画像の階層の部分。あとは_nという画像と_rという画像を用意してそれを反転させてます。

参考

• JSでナビゲーションをハイライトさせる(web dimension maker
  )