jQueryでクラスの追加／削除をする方法とは？

TOP > jQuery > jQueryでクラスの追加／削除をする方法とは？

2015.08.08

　サイトを制作する上で、aタグのリンクやinputボタンをクリックしたらあるコンテンツのデザインなどを変更させる、なんて依頼がある時があります。ちなみに当サイトでもポートフォリオのページにて実装していたりします。当サイトでは最初ページに来た時は【制作実績】にクラスが設定されているのですが、【課題制作】のボタンをクリックすることで【課題制作】にクラスが設定され、元々設定されていた【制作実績】のクラスは削除されるようになっており、そのようにすることでボタンのデザインを変更させています。

　この設定の方法はjQueryで実現することが可能となっています！そこで今回はクラスの追加・削除をjQueryで実現させる方法を紹介したいと思います(^-^)

1 1. クラスを追加させる“addClass”
2 2. クラスを削除する“removeClass”
3 3. クラスがない場合にはクラスを追加、クラスがある場合にはクラスを削除する“toggleClass”
4 まとめ

1. クラスを追加させる“addClass”

　jQueryでクラスを追加させるには、addClassというタグを使います。まずは以下のような見本を元に開設したいと思います。

ボタンをクリックすると文字色が変わる

以上のように、【ボタン】をクリックすると文字にクラスが追加され、文字色が変更する…などといったデザインの変更ができるようになります。

　上の見本を実現するためには以下のようにコードを記述してあげます。

【コード】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
   $(function (){
     $("input").click(
        function(){
           $("span").addClass("red");
        }
     );
   });
</script>

<span>ボタンをクリックすると文字色が変わる</span>

<input type="button" value="ボタン">

【CSS】

.red {
   color: #ff0000;
}

このように設定することで、【ボタン】をクリックしたらspanタグにredというクラスが追加され、spanで囲まれた文字色が変わるようになります。

　このように、addClassではクラスを追加させることができるようになります！

2. クラスを削除する“removeClass”

　続いて、元々設定されているクラスを削除するremoveClassについて解説したいと思います。
今回は文字色を赤くしてくれるようCSSを設定したredとクラスがついているものからredというクラスを削除して文字色を黒くしたいと思います。見本は以下になります。

ボタンをクリックすると文字色が黒くなる

　このようにボタンを押すとクラスを削除するためには以下のようにコードを記述してあげます。

【コード】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
   $(function (){
     $("input").click(
        function(){
           $("span").removeClass("red");
        }
     );
   });
</script>

<span class="red">ボタンをクリックすると文字色が黒くなる</span>

<input type="button" value="ボタン">

【CSS】

.red {
   color: #ff0000;
}

このように設定しておくと、ボタンを押すことでred2というクラスが削除され、red2に指定していたcolor: #ff0000;というCSSが効かなくなり、文字色が黒くなるはずです。

3. クラスがない場合にはクラスを追加、クラスがある場合にはクラスを削除する“toggleClass”

　それでは最後に、toggleClassについてお話したいと思います。toggleClassとは、クラスがない場合にはクラスを追加し、クラスがある場合にはクラスを削除する、addClassとremoveClassの両方の機能を備えたものになります。見本としては以下のものになります。

ボタンをクリックすると文字色が赤くなったり黒くなったりする

上の見本では、CSSで文字色を赤く設定するredというクラスをtoggleClassによって追加／削除させています。コードは以下のように記述してあげると実装可能となります。

【コード】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
   $(function (){
     $("input").click(
        function(){
           $("span").toggleClass("red");
        }
     );
   });
</script>

<span>ボタンをクリックすると文字色が赤くなったり黒くなったりする</span>

<input type="button" value="ボタン">

【CSS】

.red {
   color: #ff0000;
}

このように記述することでredというクラスが追加／削除されるようになります。
Webサイト制作においては、このtoggleClassを使うことがよくあるので是非とも覚えましょう！

まとめ

　以上がjQueryにてクラスを追加／削除する方法になります。この方法を覚えるとデザインの幅もグンと広がると思いますし、何よりアニメーションっぽい動きをさせることもできるようになりますので、今回ご紹介したことは覚えておいて損はないかと思われます(^-^)

TOP > jQuery > jQueryでクラスの追加／削除をする方法とは？