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('クラス名 クラス名');