JavaScript
Googleでログイン
問題10：クラスのつけ剥がしをしよう
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¥
完了にする！
活動記録をTweetする
1.JavaScriptでできること
今回のように、クリックイベントなどで毎回クラスをつけたり剥がしたりするのに最適なメソッドです。アコーディオンなどの実装でもかなり使うので覚えてましょう！