
クラスのつけ剥がしをしよう
問題
jqueryを使って、クラスのつけ剥がしをしよう!
自分の環境に書くコード
<p>クリックしたら文字を赤色→黒色にスイッチしよう。</p>
¥HTML¥
p.is-active {
color: red;
}
¥CSS¥
期待する画面

解答ソースコード
$(function() {
$('p').click(function() {
$(this).toggleClass('is-active');
});
})
¥JavaScript¥
<!-- jqueryの読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<p>クリックしたら文字を赤色→黒色にスイッチしよう。</p>
¥HTML¥
p.is-active {
color: red;
}
¥CSS¥
完了にする!
1.JavaScriptでできること
解説
今回のように、クリックイベントなどで毎回クラスをつけたり剥がしたりするのに最適なメソッドです。アコーディオンなどの実装でもかなり使うので覚えてましょう!