ナビなどのボタン群をホバーやクリックしたときに変化させるのをjQueryで制する

switch.jpg

こんにちは! iPhone5導入にいまいち踏み切れず、とりあえずiPad2をいぢり倒している いわだて (@dutchisover) です!

Switch

ホバーやクリックなら、わざわざjQueryを使わなくても CSSで事は足りてしまいます。けども、ボタンがいくつもあって、それらがすべて連動したグループの場合、たとえばナビゲーションメニューなどだと、困る場合がでます。

サンプルです

たとえばこんなボタンの集まり。どれか一つだけしか選択ができない仕様のため、クリックされたボタン以外のボタンも連動させた動作が必要です。

CSSだけで組むとこんな感じに。

単品のボタンとしては問題ないものの、ボタンのグループとしては全く機能しません。

完成版の コードです

まずはCSSで ホバー用のクラス(今回は jqHover)と クリック用のクラス(今回は jqActive)を用意します。

HTML

CSS

お好みで ホバーのときの効果に !important を付けると クリック後でもホバーすると色が変わったりします。

つづいて jQueryで ホバークリック のイベントで さっきのCSSのクラス(jqHover と jqActive)を着けたり外したりします。

jQuery

これでスイッチのように 切り替えができるボタンができました!

余談ですが、ここに至るまでに いろいろと紆余曲折しまして。
全部の要素にフラグを立てて、ボタンひとつひとつにIDとイベントを設定して、イベント1個1個に全ての要素のフラグの true、false を切り替えして フラグがtrueの要素はホバーイベントは発動しない、とか。

要素ごと、イベントごとに書くのがえらい苦痛と時間を伴うやりかたでずっとやってましたwwもうやりません。

クラス(addClass と removeClass)って他にもいろいろと応用が利くのでえらい便利です。別の方法はまた次回やります!

以上でした!

最近の記事

Sponsored