こんにちは。
ゆうや(@yuyaphotograph)です!
この記事では、
- クリックしたボタンの背景色や文字色を変更する方法が知りたい
- jQueryのtoggleClassメソッドを使ってみたい
- クリックに応じてCSSのクラスをつけたり外したりするにはどうしたらいいの…?
という方のお悩みを解決します!
この記事で紹介する「toggleClassメソッドでクラスを付けかえる方法」を実践すれば、jQueryの超基本スキルが身につきます。
それでは見て参りましょう〜!
toggleClassメソッドとは?
toggleClassメソッドとは、引数に指定したクラスを該当の要素が持っている場合はそのクラスを取り除き、持っていない場合は逆につけ加えてくれるjQueryのメソッドです。
以下のように使用します。
toggleClassの使い方
クリックした要素の色を変更する方法のポイント
上述したtoggleClassメソッドを駆使してクリックした要素の背景色と文字色を変更します。
ポイントは以下の2つ。
- 要素がクリックされたらtoggleClassでisActiveクラスのつけ外しを行う
- isActiveクラスには変更後の背景色と文字色を書いておく
それではHTML、CSS、jQueryの順でサンプルコードを確認しましょう。
HTML
HTML
CSS
CSS
jQuery
jQuery
サンプル
まとめ
toggleClassメソッドを使用すればスマートにクラスのつけ外しが実装できます。
しかし、シチェーションによってはaddClassメソッドやremoveClassメソッドじゃないと実装できない場合も出てきます。
仕様に応じて臨機応変にクラスつけ外し実装をお楽しみください。
「jQueryでの実装例をもっともっと知りたい」
という方は以下の記事にも目を通してみてください〜!



