Warning: Undefined array key "HTTP_USER_AGENT" in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/other/tiny-fixed.php on line 75
グローバルメニュー内のリストの中で
現在のページの部分にclassを与える事
で今いるページだけをスタイリングする
事が出来ます。静的なサイトなら手作業
で済みますが、CMSとかASPになると、その
中のルールに依存するので少し厄介です。
某所で悩んでる人を見かけたので書いてみます。本当はさほどネタがないんですが。
実装
「現在のページ」のリンクだけclassが加わっていますので赤い文字にスタイリングする事が出来ました。
コード
var url = window.location;
$('.menu a[href="'+url+'"]').addClass('current');
jQueryはこれだけです。別にjQueryじゃなくてもよくね？ってコードですが。
現在のページのURLを取得して属性フィルタで判別してcurrentっていうclassを与えます。これで「現在閲覧中のページ」のリンクにclassを与えることが出来ますね。
.current{color:red;}
で、スタイリングすればユーザーに現在のページを明示できます。ただまぁフルパスである必要がある等、条件は限られますので実際には工夫が必要です。
属性フィルタに関しては以前まとめましたので参考になさってください。
【追記】#リンクの判別
@YumiSora なるほど、何か抜けてる気がしたけど # 付きのURLとかダメですね。最近はjQuery使わない素のJSの勉強もしてるのですが、ちょっとスタイル変える程度なら別にjQueryに比べて難しくもないですね。
— なつきさん (@Stocker_jp) 3月 10, 2012
ダメじゃないですｗ
「属性フィルタに関しては以前まとめましたので参考になさってください」って書いたんですけどね。
言う必要ないと思ったんですけど、「セレクタの記述は貴方のサイトに合わせてください」。
冒頭にも書いたように、基本的にCMSとかへの対応なので例えばWPならテンプレートをセレクタに埋め込めば応用できます。jQueryでDOM操作する際はフィルタ必須ですので覚えるといろいろ捗ります。
$('.menu a[href*="#"]').addClass('current');
でも自作して幸せならそのほうがいいんじゃないですかね。お好みでどうぞ。
paulundで記事になってた（こんな基本のTips記事は珍しいですね）のでふと悩んでる人を思い出して書いてみました。
まだちょっとバタバタしてるので短い記事ですみません。
