デイトラ(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の実装は以下のようにしました。
- ヘッダーのナビゲーションメニューに
- ヘッダーのナビゲーションメニュー用の「link-active」クラスを用意
- 「link-active」クラスに赤色の下線を引くスタイルをつける
- ヘッダーのナビゲーションメニューのクリックイベントで以下を行う
- ヘッダーのナビゲーションメニュー全てから「link-active」クラスを削除する
- クリックされたヘッダーのナビゲーションメニューに「link-active」クラスを追加する
実際の僕のコードは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 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> |
|
1 2 3 4 |
/* CSS */ .link-active { border-bottom: 1px solid red; } |
|
1 2 3 4 5 |
// jQuery $('.to-link').click(function() { $('.to-link').removeClass('link-active'); $(this).addClass('link-active') }); |
感想・まとめ
ポイントはクリックした時に、全てのナビゲーションメニューから赤色の下線を引くためのクラスを削除することですかね。
ついついクリックされたメニューだけのクラスを削除してしまうと、赤色の下線が消えなくなるという状態になってしまうので注意が必要です。
個人的にはHTML・CSSでマークアップしてるよりもjQuery(JavaScript)とかを書いているほうが断然楽しいですね。
元々今の会社でもUIはほとんど作っておらず、UIの内部処理ばかりを作ってたんで当然っちゃ当然かもしれませんが。
最終課題はまであと2日分。
引き続き頑張っていきましょー！！
