なんにもない日の頭の中はこんなもんだったりする

【jQuery】class(クラス)の追加と削除

【jQuery】class(クラス)の追加と削除(addClass、removeClass、toggleClass)

jQueryを使えば、class(クラス)の追加も削除も簡単にできます。

きのこさん
どんなときに使いますか?
きのこさん
ボタンを押してスタイルを変えたい時とか便利ですよー

『addClass』class(クラス)の追加

指定の要素に『one』というクラスを追加する。

$("要素").addClass("one");

『removeClass』class(クラス)の削除

指定の要素から『one』というクラスを削除する。

$("要素").removeClass("one");

『addClass、removeClass』を使って、class(クラス)がなかったら追加、あったら削除

$("要素").click(function(){ // 要素をクリックして
  if($(this).hasClass("one")){ // クリックされた要素が『one』というクラスを持っているなら
    $(this).removeClass("one"); // 『one』というクラスを削除する
  }else{ // クリックされた要素が『one』というクラスを持ってなかったら
    $(this).addClass("one"); // 『one』というクラスを追加する
  }
});

説明文を除くと、

$("要素").click(function(){
  if($(this).hasClass("one")){
    $(this).removeClass("one");
  }else{
    $(this).addClass("one");
  }
});

『toggleClass』だけで、class(クラス)がなかったら追加、あったら削除

『toggleClass』を使うとシンプルです。
toggle( トグル )は 「 同一の操作で二つの状態を交互に切り換えること 」を意味しています。

$("要素").click(function(){ // 要素をクリックして
  $(this).toggleClass("one"); // 『one』というクラスがなかったら追加、あったら削除
});

説明文を除くと、

$("要素").click(function(){
  $(this).toggleClass("one");
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
トグルって便利ー
きのこさん
いろいろな使いかたができるので柔軟に対応しましょう

関連記事

【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Web design gallery - デザインのこと - ウェブデザインあつめました。

デザインの記事

女子美術大学・女子美術大学短期大学部
みんなでつくる HELLO! iDEA HELLO! New basic|studio CLIP
10月23日
とって/窓の家のかたち