toggleClass(class, [switch])


version 1.0 以降

解説

要素のクラスを切り替えます。

指定されたクラスが設定されていれば、そのクラスを削除します。
指定されたクラスが設定されていなければ、そのクラスを追加します。

引数

  • class
    String: CSS クラス名（複数可）
  • [switch]オプション (version 1.3 から)
    Boolean: クラスを追加する場合は true 、削除する場合は false

戻り値

  • jQuery: jQueryオブジェクト

関連


例

例1:クリックする度に、"border_blue" クラスを切り替えます。 

// CSS
.border_blue { border: 3px solid #0000ff; }


$("#block1").click(function() {
    $(this).toggleClass("border_blue");
});

#block1

例2:クリックする度に、green, yellow, red クラスを切り替えます。 

// CSS
.green  { borderbackground-color: #dcffdc; borderborder: 1px solid #006400; }
.yellow { borderbackground-color: #fffacd; borderborder: 1px solid #daa520; }
.red    { borderbackground-color: #ffe4e1; borderborder: 1px solid #b22222; }


var count = 0;
$("#block2").click(function() {
    count++;
    $(this)
      .toggleClass("green",  count % 3 == 0)
      .toggleClass("yellow", count % 3 == 1)
      .toggleClass("red",    count % 3 == 2);
});

#block2

ページトップヘページトップヘ

Attributes
attr(name)
attr(properties)
attr(key, val)
attr(key, fn)
removeAttr(name)
addClass(class)
addClass(fn)
hasClass(class)
removeClass(class)
removeClass(fn)
toggleClass(class, [switch])
toggleClass(fn, [switch])
html()
html(fn)
html(val)
text()
text(fn)
text(val)
val()
val(fn)
val(val)


ページトップヘページトップヘ