現在のページに相対パスでリンクしているaタグにclassを加える方法(jQuery利用)


ここのところ、別に運営しているサイトのリニューアルをしていたのですが、なんとかそっちのほうも再公開にまで至ったので、こちらのブログも再開します。

上記サイトをリニューアルしている間に、いろいろjQuery等をいじったので、その時に学んだことをメモ。

そういえば先日、かちびと.netというサイトで、今回の似たようなエントリーが投稿されていました。
 jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える – かちびと.net
 ただこのやり方、やってみると絶対パスではうまくいくのですが、<a href=”hoge.html”>などの相対パスではうまくいかない様子。

というわけで、自分がやった方法は以下のような感じ。なお、CSSにTwitter BootStrapを使っています。

前半部分は下記ページのコードをそのまま使わせてもらっています。
ファイル名取得

ちなみに、自分が実際に使っているコードでは、『 || $(this).attr(“href”) == “./” + file_name』はわざわざ書いてません。リンク先がindex.htmlで、”./”とだけ記入する場合を除いてだいたいつけない派なので・・・(つけたほうがいいのだろうか? このあたりはよく分かってないです。置換したい場合に、下の階層を意味する”../”と競合しそうな気がして・・・。そういうことがあるのかは分かりませんが・・・)。

よくよく考えてみると、それなら、$('a[href="'+file_name+'"]').addClass('active'); とすればいいだけか。

コメントを残す

メールアドレスが公開されることはありません。