[jQuery]jQueryを使ってメニューのアクティブを判断する

jQueryを使ってメニューのアクティブを判断する

久しぶりのhtml案件疲れました。
WordPressばかり触っていると何をするにしても楽してるなと改めて感じました。

で、タイトルにもあるようにスタティックなhtmlのサイトだとメニューのアクティブを判断するのって無理ですよね。
そこでjavescriptを使わなきゃならないのです。

今回はそのソースを掲載しとこうと思います。

まずはデモをご覧ください。

html

これは普通にulでメニューを作成しているだけです。

CSS

CSSもお好みで変更してください。

js

ちょっと解説すると現在ページのURLとhref属性の値を比べて同じだったらclass=activeを付けて違ったらclass=activeを消す。
とやってることは以上になります。

まとめ

CMS期にあまり使うことはないと思いますが、メモっておきます。

しかしjsって便利ですね。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク