jQueryで現在のリンクにクラスを付ける

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

PHPとかWPとかではなく、HTMLで静的なページを制作している場合、メニュー構造部分なんかは、そのページ毎に編集したりしないといけませんよね。

そんな時に、Dreamweaverではライブラリ機能が使えるのですが、ライブラリ機能を使うと、ページ毎に少し変えたい場合に変えれません。

例えば上記のようなHTMLがライブラリとして登録されていると、指定してある全てのページに対して、同じコードが挿入されます。


でも、HOMEでは

のように、Cafeページでは

のように、現在表示されているページは「active」クラスを付与して、現在そこが表示されているというのがわかりやすいデザインを指定したい場合があります。

そんな時に使えるJavascriptです。

「location.href」で現在のURLを取得して、そこから最後のファイル名部分だけを抽出します。
最後に、aタグのhref属性が、現在のファイル名で終わっているものがあれば、そのエレメントにaddClassでactiveを付加しています。

同じHTMLの中に、階層の違う同名ファイルへのリンクがあるとマズいですが、そうでなければ、これでOKです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。