目次
ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理) 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 準備編・ヘッダーとメインビジュアルのコーディング④
お久しぶりです。引っ越していてしばらくネットから離れていました。新しい家にまだ回線を引いてないのでWi-Fiが使えません。ギガを気にしながらのテザリングだと、自然...
以上です。今回は簡潔になりました。次はタブ編です。
コメント