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

やりたかったこと

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

某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のリンクテキストが赤字になる。

注意点

• クラス名の指定間違えないように
• リンクはhttpからのフルパスで書くように

とはいえ、リンクをフルパス以外で書きたいときもあるのですよ。
そんなときは、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 頼みを肝に銘じよう。

参考