【jQuery】classの追加・削除・切り替えを完全解説｜addClass/removeClass/toggleClass/hasClass

jQueryのクラス操作は最も頻繁に使う機能の一つです。addClass()・removeClass()・toggleClass()・hasClass()の4つを使いこなすことで、アニメーション・UI状態管理・スタイル切り替えを効率的に実装できます。

1. addClass()：クラスを追加する

// 1つのクラスを追加
$('#box').addClass('active');

// 複数のクラスを一度に追加（スペース区切り）
$('#box').addClass('active highlight bold');

// 全要素にクラスを追加
$('.list-item').addClass('selected');

// 条件によってクラスを追加
if (score >= 80) {
  $('#result').addClass('pass');
}

2. removeClass()：クラスを削除する

// 1つのクラスを削除
$('#box').removeClass('active');

// 複数のクラスを一度に削除
$('#box').removeClass('active highlight');

// 引数なしで全クラスを削除（クラス属性自体を空にする）
$('#box').removeClass();

// 兄弟要素のクラスを外してから自分に付ける（排他的アクティブ）
$('.tab').on('click', function () {
  $('.tab').removeClass('active');  // 全タブから削除
  $(this).addClass('active');       // クリックしたタブに追加
});

3. toggleClass()：クラスを切り替える

toggleClass() はクラスが存在すれば削除、なければ追加する切り替えを一発で行います。

// クラスの有無を切り替える
$('#menu-btn').on('click', function () {
  $('#nav-menu').toggleClass('is-open');
});

// 第2引数にboolean値を渡して強制的に追加/削除
var isLoggedIn = true;
$('#user-badge').toggleClass('logged-in', isLoggedIn);  // trueなら追加、falseなら削除

// 複数クラスの同時切り替え
$('#box').toggleClass('open active');  // 2つのクラスを同時に切り替え

4. hasClass()：クラスの有無を確認する

// クラスが存在するか確認
if ($('#box').hasClass('active')) {
  console.log('activeクラスがある');
}

// 複数要素のうち1つでも指定クラスを持つか確認
if ($('.item').hasClass('selected')) {
  console.log('選択済みの要素が存在する');
}

// toggleClass()の代替（hasClassで分岐）
$('#btn').on('click', function () {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active').text('有効にする');
  } else {
    $(this).addClass('active').text('無効にする');
  }
});

5. 実用パターン：CSSアニメーションとクラス操作の連携

jQueryでクラスを付け替えて、スタイルの変化はCSSアニメーションに任せると効率的です。

.panel {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(-10px);
}
.panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

// クラスを付け替えるだけでアニメーションが動く
$('#show-btn').on('click', function () {
  $('#panel').toggleClass('is-visible');
});

// スクロールに合わせて要素を表示（IntersectionObserverの代替）
$(window).on('scroll', function () {
  var scrollTop    = $(this).scrollTop();
  var windowHeight = $(this).height();

  $('.animate-on-scroll').each(function () {
    if ($(this).offset().top < scrollTop + windowHeight * 0.9) {
      $(this).addClass('is-visible');
    }
  });
});

まとめ

関連記事: jQueryアコーディオンの実装完全ガイド / jQueryのアニメーション完全ガイド

よくある質問（FAQ）