デイトラ(30DAYSトライアル)中級コース(2nd)まとめ【DAY24】

デイトラ(30DAYSトライアル)中級コース(2nd)の課題は「ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）」です。

課題の記事はデイトラWebアプリ版で確認ください。

デイトラWebアプリ版をまだ初めてない方は、デイトラWebアプリ版の始め方の記事も書いていますので、そちらもよろしくお願いします。

ちなみに中級コースは今まで2ndと呼ばれていた部分になります。

デイトラ(30DAYSトライアル)中級コースDAY24の完成イメージ

デイトラ(30DAYSトライアル)D中級コースDAY24の完成イメージは以下の通りです。

#30DAYSトライアル 2nd DAY24『ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）』完了

クリックイベントで下線を引くためのクラスをつけ外しするだけだったので特に苦戦しませんでした#プログラミング学習 #プログラミング初心者 #駆け出しエンジニアと繋がりたい pic.twitter.com/0EMOGV2zov

— じゅに💻脱サラに命かける人 (@Jyu210) January 23, 2020

ヘッダーのナビゲーションメニューにマウスを当てた時に赤色の下線を引くようにしていると思いますが、それをクリックしたメニューに残したままにするというイメージです。

デイトラ(30DAYSトライアル)中級コースDAY24の仕様

デイトラ(30DAYSトライアル)D中級コースDAY24の完成イメージが読み取れるかと思いますが、以下のような仕様で作成しています。

デイトラ(30DAYSトライアル)中級コースDAY24の実装

デイトラ(30DAYSトライアル)D中級コースDAY24の実装は以下のようにしました。

実際の僕のコードは以下の通りです。

<!-- HTML -->
<nav class="hnav">
    <ul class="hnav-list">
        <li class="hnav-item"><a class="to-link" href="#card">Card</a></li>
        <li class="hnav-item"><a class="to-link" href="#news">News</a></li>
        <li class="hnav-item"><a class="to-link" href="#price">Price</a></li>
        <li class="hnav-item"><a class="to-link" href="#access">Access</a></li>
        <li class="hnav-item"><a class="to-link" href="#contact">Contact</a></li>
    </ul>    
</nav>

/* CSS */
.link-active {
    border-bottom: 1px solid red;
}

// jQuery
$('.to-link').click(function() {
    $('.to-link').removeClass('link-active');
    $(this).addClass('link-active')
});

感想・まとめ

ポイントはクリックした時に、全てのナビゲーションメニューから赤色の下線を引くためのクラスを削除することですかね。

ついついクリックされたメニューだけのクラスを削除してしまうと、赤色の下線が消えなくなるという状態になってしまうので注意が必要です。

個人的にはHTML・CSSでマークアップしてるよりもjQuery(JavaScript)とかを書いているほうが断然楽しいですね。

元々今の会社でもUIはほとんど作っておらず、UIの内部処理ばかりを作ってたんで当然っちゃ当然かもしれませんが。

最終課題はまであと2日分。

引き続き頑張っていきましょー！！