今回はclassの追加や削除ができるaddClass、removeClass、toggleClassをご紹介します。

基本的な構文

<script>
    $(function(){
        $('#button01').on('click', function(){
            $('#sample').addClass('bgColor');
        });
        $('#button02').on('click', function(){
            $('#sample').removeClass('bgColor');
        });
        $('#button03').on('click', function(){
            $('#sample').toggleClass('bgColor');
        });
    });
</script>	

$(‘セレクト’).addClass(‘クラス名’);　//classを追加
$(‘セレクト’).removeClass(‘クラス名’);　//class削除
$(‘セレクト’).toggleClass(‘クラス名’);　//追加と削除を交互に繰り返し

上記では
#button01クリックでtextColorというclassを追加、
#button02クリックでtextColorというclassを削除、
#button03クリックでtextColorというclassを追加・削除を繰り返します。

実装結果

• ボタン01（class追加）
• ボタン02（class削除）
• ボタン03（class追加・削除）

・『ボタン01』をクリックでbgColorというクラスが追加されました。
CSSでbgColorにbackgroundを指定しておくと背景色が変わります。

・『ボタン02』はクリックですでにあるbgColorというクラスが削除され背景色が元に戻りました。

・『ボタン03』はクリックで追加と削除を繰り返しています。

いろいろな用途で使えて便利ですね。
是非使ってみてください。

他にもあるよ。関連記事

• HTMLのa要素でダウンロードや電話発信させる方法
• 【CSS】CSSだけで線をグラデーションにする方法（border、背景+疑似要素）
• 【JavaScript】selectタグで選択した値を保持したまま、ページ遷移させる方法