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

目次

ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理) 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>

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

こちらの記事と同じですね。

デイトラWeb制作コース中級編DAY12 準備編・ヘッダーとメインビジュアルのコーディング④

以上です。今回は簡潔になりました。次はタブ編です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次