ここのところ、別に運営しているサイトのリニューアルをしていたのですが、なんとかそっちのほうも再公開にまで至ったので、こちらのブログも再開します。
上記サイトをリニューアルしている間に、いろいろjQuery等をいじったので、その時に学んだことをメモ。
そういえば先日、かちびと.netというサイトで、今回の似たようなエントリーが投稿されていました。
jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える – かちびと.net
ただこのやり方、やってみると絶対パスではうまくいくのですが、<a href=”hoge.html”>などの相対パスではうまくいかない様子。
というわけで、自分がやった方法は以下のような感じ。なお、CSSにTwitter BootStrapを使っています。
//現在表示しているページのファイル名取得
function GetFileName(file_url) {
file_url = file_url.substring(file_url.lastIndexOf("/") + 1, file_url.length)
//拡張子も取り除く場合は次の行のコメントアウトをはずしてください
//file_url = file_url.substring(0,file_url.indexOf("."));
return file_url;
}
var file_name = GetFileName(location.href);
//現在のページの相対パスリンクにclass="active"を追加。
$("a").each(function() {
if($(this).attr("href") == file_name || $(this).attr("href") == "./" + file_name) {
$(this).addClass("active");
}
});
前半部分は下記ページのコードをそのまま使わせてもらっています。
ファイル名取得
ちなみに、自分が実際に使っているコードでは、『 || $(this).attr(“href”) == “./” + file_name』はわざわざ書いてません。リンク先がindex.htmlで、”./”とだけ記入する場合を除いてだいたいつけない派なので・・・(つけたほうがいいのだろうか？ このあたりはよく分かってないです。置換したい場合に、下の階層を意味する”../”と競合しそうな気がして・・・。そういうことがあるのかは分かりませんが・・・)。
よくよく考えてみると、それなら、$('a[href="'+file_name+'"]').addClass('active'); とすればいいだけか。
コメント