【2nd】DAY23『ページ内リンクでクリックした要素に対して下線を引く(クリックイベントの処理)』

プログラミング

内容

今日はヘッダー内のリンクをクリックした際に、クリックした要素に対して下線を引く動きを実装します。

やってみて思ったこと

自分でゼロから実装しようと思ったけど、実装のイメージが分かりませんでした。

はにわまんさんが記事の中で実装のイメージを書いていてくれたので、その通りにやったら簡単に実装できました。

キーワード

実装のイメージとしては、クリックされた時にメニューの全てのリンクの下線を削除して、クリックされた要素に対して下線を引く、という処理を行います。

https://haniwaman.com/notice/day23/

自分が書いたコード

今回の課題の中で、僕が書いたコードになります。

参考にしたい方は参考にしてみてください。他にも良い方法があればコメントしていただけると嬉しいです。

<script>
$('header a').click(function(){
    $('header a').css('border-bottom', 'none');     
    $(this).css('border-bottom', '1px solid #E81919'); 
});
</script>

改善点

スクロールしたときに下線の位置が変わらないので、スクロールした位置を取得して下線の位置を変えられるようにする。

以上がDAY23でした。

コメント