Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

余裕がある人向け課題 クリックイベント編 【30Daysトライアル2nd】

スポンサーリンク

tab

 

30Daysトライアル2nd Day24 余裕がある人向け課題の感想記事です。

 

 

課題の内容

Day24の余裕がある人向け課題は「クリックイベントを使ってタブ切り替えを実装」でした。

 

ショーヘーさんからのヒントはこちら↓

実装の手順としては、

  1. タブがクリックされたら全タブのactiveを削除する
  2. 全パネルのactiveを削除する
  3. クリックされたタブにactiveを付ける
  4. 対応するパネルにもactiveを付ける

です。

 

jQueryに自信がない私にとっては、かなり厳しい課題になることが予想されました。。

 

コーディング課題のリンクとイメージ

課題のURLはこちら↓

https://xd.adobe.com/spec/d73b3b4b-9913-4a92-597f-23c3f9aeb335-a10a/

 

(パスワードは東フリさんのスラックに参加すると確認できます)

 

 課題の完成イメージ↓ 

 

tab
 

チャレンジ結果

 

See the Pen 30 days trial 2nd tab menu by Yaponka (@Yaponka) on CodePen.

 

jQueryがさっぱりわからないので結局ググってみつけたタブメニューの作り方を参考にして作ってます↓ 

5歳でもわかる、タブメニューの作り方(jQuery編) - Qiita

 

意外とつまづいたのが、「タブOのキャッチ的なテキスト」の吹き出し風に左右についている斜めの線に大苦戦。

結果的に疑似要素として左右のみボーダーを付けて、そのボーダーを斜めに傾ける方法を採用しました。

 

その節で大変お世話になった記事↓

 CSSで斜めの線を描く - コードログ

  

最後に

jQuery苦手なんですが、課題をこなすために参考のコードをコピペしてどうやったら動いているのかを確認して、ちょっといじってみるだけでもすごく勉強になって苦手意識が少し和らいだと思ってます。

苦手だけれどもjQueryJavaScriptと目をそらさず少しずつ向き合っていこうと思います。

 

30Daysトライアル2ndの本課題の感想はこちらからどうぞ↓

 

treatmyself.hatenablog.jp