DAY48.実務でよく使うアニメーションの付け方編 クリックイベントの処理

01.ページ内リンクでクリックした要素に下線を引く

メニューやタブをクリックしたとき、
クリックしたメニューの色が変わったり太字になったりする

ユーザーにとって、どれが選択されているのかを見分けるための大事な表現

①クリックされた時にメニューの全てのリンクの下線を削除する
②クリックされた要素に対して下線を引く

addClass、removeClassを活用

02.クリック時にクラスをつけ外し

アクションイベントの多くは
「◯◯したら□□のクラスをつける」
「◯◯したら□□のクラスを外す」
を行っているだけ

①メニューをクリックしたら全メニューのis-actionクラスを外す
②クリックしたメニューにだけis-actionクラスをつける

jQuery('.header__nav ul li a').click(function() {
　jQuery('.header__nav ul li a').removeClass( 'is-active' );
　jQuery(this).addClass( 'is-active' ); return false;
});