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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。