2012.03.11グローバルメニュー内のリストの中で現在のページの部分にclassを与える事で今いるページだけをスタイリングする事が出来ます。静的なサイトなら手作業で済みますが、CMSとかASPになると、その中のルールに依存するので少し厄介です。某所で悩んでる人を見かけたので書いてみます。本当はさほどネタがないんですが。「現在のページ」のリンクだけclassが加わっていますので赤い文字にスタイリングする事が出来ました。a[href="'+url+'"]').addClass('current');jQueryはこれだけです。別にjQueryじゃなくてもよくね?ってコードですが。現在のページのURLを取得して属性フィルタで判別してcurrentっていうclassを与えます。これで「現在閲覧中のページ」のリンクにclassを与えることが出来ますね。.current{color:red;}で、スタイリングすればユーザーに現在のページを明示できます。フルパスである必要がある等、条件は限られますので実際には工夫が必要です。属性フィルタに関しては以前まとめましたので参考になさってください。付きのURLとかダメですね。最近はjQuery使わない素のJSの勉強もしてるのですが、ちょっとスタイル変える程度なら別にjQueryに比べて難しくもないですね。2012ダメじゃないですw「属性フィルタに関しては以前まとめましたので参考になさってください」って書いたんですけどね。言う必要ないと思ったんですけど、「セレクタの記述は貴方のサイトに合わせてください」。冒頭にも書いたように、基本的にCMSとかへの対応なので例えばWPならテンプレートをセレクタに埋め込めば応用できます。jQueryでDOM操作する際はフィルタ必須ですので覚えるといろいろ捗ります。a[href*="#"]').addClass('current');でも自作して幸せならそのほうがいいんじゃないですかね。paulundで記事になってた(こんな基本のTips記事は珍しいですね)のでふと悩んでる人を思い出して書いてみました。してるので短い記事ですみません。コピーかちびと.net関連記事jQueryDribbbleの投稿をjQueryで自分のサイトに表示させるちょっと調べ物をしたので備忘録です。初心忘れるべからず...jQuery長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps使いやすそうだったので備忘録。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。