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

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

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】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)