More than 5 years have passed since last update.

「現在のページへのリンクをハイライトさせる」がjqueryでさくっとできてビックリした話

Posted at 2014-05-13

やりたかったこと

メニューリンクによくある、いま自分のいるページ（現在地）へのリンクの文字色やら背景色やらが変わる、例のあれ。

某phpフレームワークでできているサイトでこれを作りたくて、if文なりなんなり書くのかなあ、と考えていたら、jquery でなんともあっさりできました。

jquery は読み込んだうえで。

<script>
	 var url = window.location;
        $('.nav a[href="'+url+'"]').addClass('active');
</script>

</head>

<ul class="nav">
	<li><a href="http://www.test.com/test.html">test</a><li>
	<li><a href="http://www.test.com/test2.html">test</a><li>
</ul>

.active{color:red;}

test2.html を訪れている時は、test2のリンクテキストが赤字になる。

とはいえ、リンクをフルパス以外で書きたいときもあるのですよ。
そんなときは、window.locationのプロパティを変えればよい。

<script>
	 var url = window.location.pathname;
        $('.nav a[href="'+url+'"]').addClass('active');
</script>

</head>

<ul class="nav">
	<li><a href="/test.html">test</a><li>
	<li><a href="/test2.html">test</a><li>
</ul>

普段PHPerな筆者。
同じことをPHPだけでやろうとしたら、出来なくはないけど非常にぐっちゃぐちゃになって面倒なコードになる。
困った時のjs, jquery 頼みを肝に銘じよう。