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という画像を用意してそれを反転させてます。

参考

  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします