デイトラWeb制作コース中級編 DAY27 ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理)①

2022年9月9日2023年2月16日

ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理) jQuery

とても分かりやすいコードのため今回はコードをそのまま貼ります。前回のコードの親要素の中に書きます。

実は、アクションイベントの多くは「◯◯したら□□のクラスをつける」「◯◯したら□□のクラスを外す」を行っているだけです。
ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）

// クリック（メニュー）
jQuery('.header__nav ul li a').click(function() {
jQuery('.header__nav ul li a').removeClass('is-active');
jQuery(this).addClass('is-active');
return false;
});

ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理) HTML

JSでクラスをつけ外しするため、HTMLはプレーンな状態にしておきます。

<nav class="header__nav">
  <ul>
    <li><a href="#a-card">Card</a></li>
    <li><a href="#a-news">News</a></li>
    <li><a href="#a-price">Price</a></li>
    <li><a href="#a-access">Access</a></li>
    <li><a href="#a-contact">Contact</a></li>
  </ul>
</nav>