jQueryを使用して、classを追加したり、削除したりする方法を紹介します。
動的な部分や動きをつけるときにclassを付けたりすると簡単に実装できるので必ず覚えておきたいjQueryの1つです。

jQueryでCSSの追加・変更・削除やclass追加をする方法

では、早速jQueryを使用して動的にCSSの追加や削除を行ってみます。

CSSを追加する

指定の要素にclassを追加します。

$('要素').addClass('class名');

CSSを削除する

指定の要素にclassを削除します。

$('要素').removeClass('class名');

classがあれば削除、なければ追加する

指定の要素に指定の要素に指定のclass名がついていれば削除、なければ追加する方法です。

$('要素').toggleClass('class名');

指定の要素がクリックされたら、指定のclassがあれば削除、なければ追加する

指定する要素に指定のclass名がついていれば削除、ない場合はclassを追加する方法です。

$('要素').click(function(){
  $(this).toggleClass('class名');
});

関連記事