jQueryを使用してHTMLの要素にclassの追加や削除をしたい場合があります。
クリックやマウスオーバーした時などにスタイルを変更したい場合、
HTMLの要素のclassを変更すれば用意しておいたスタイルに変えることができます。
下記にjQueryの「addClass」「removeClass」「toggleClass」メソッドを使用して、
HTMLの要素にclassを追加したり、削除したりする方法をメモします。
■ addClass
指定したHTMLの要素にclassを追加します。
$('要素').addClass('クラス名');
■ removeClass
指定したHTMLの要素のclassを削除します。
$('要素').removeClass('クラス名');
■ toggleClass
指定したHTMLの要素のclassがなければ追加し、ある場合は削除します。
$('要素').toggleClass('クラス名');
■ 使用例（toggleClass）
toggleClassを使用してマウスオーバーした時にclassを追加・削除をした場合です。
【JS】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sample").mouseover(function(){
$(this).toggleClass('hoge');
});
});
</script>
【HTML】
<div id="sample"> サンプル </div>
「hoge」クラスのCSSを用意しておけば、スタイル変更することができます。
複数クラスを追加・削除する場合はスペースで区切ると複数指定することができます。
$('要素').addClass('クラス名 クラス名');
