jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える

グローバルメニュー内のリストの中で
現在のページの部分にclassを与える事
で今いるページだけをスタイリングする
事が出来ます。静的なサイトなら手作業
で済みますが、CMSとかASPになると、その
中のルールに依存するので少し厄介です。

某所で悩んでる人を見かけたので書いてみます。~~本当はさほどネタがないんですが。~~

「現在のページ」のリンクだけclassが加わっていますので赤い文字にスタイリングする事が出来ました。

 var url = window.location;
    $('.menu a[href="'+url+'"]').addClass('current');

jQueryはこれだけです。別にjQueryじゃなくてもよくね？ってコードですが。

現在のページのURLを取得して属性フィルタで判別してcurrentっていうclassを与えます。これで「現在閲覧中のページ」のリンクにclassを与えることが出来ますね。

.current{color:red;}

で、スタイリングすればユーザーに現在のページを明示できます。ただまぁフルパスである必要がある等、条件は限られますので実際には工夫が必要です。

属性フィルタに関しては以前まとめましたので参考になさってください。

jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ

@YumiSora なるほど、何か抜けてる気がしたけど # 付きのURLとかダメですね。最近はjQuery使わない素のJSの勉強もしてるのですが、ちょっとスタイル変える程度なら別にjQueryに比べて難しくもないですね。

— なつきさん (@Stocker_jp) 3月 10, 2012

ダメじゃないですｗ

「属性フィルタに関しては以前まとめましたので参考になさってください」って書いたんですけどね。

言う必要ないと思ったんですけど、「セレクタの記述は貴方のサイトに合わせてください」。

冒頭にも書いたように、基本的にCMSとかへの対応なので例えばWPならテンプレートをセレクタに埋め込めば応用できます。jQueryでDOM操作する際はフィルタ必須ですので覚えるといろいろ捗ります。

$('.menu a[href*="#"]').addClass('current');

でも自作して幸せならそのほうがいいんじゃないですかね。お好みでどうぞ。

paulundで記事になってた（こんな基本のTips記事は珍しいですね）のでふと悩んでる人を思い出して書いてみました。
まだちょっとバタバタしてるので短い記事ですみません。