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

tab

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

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

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

実装の手順としては、

タブがクリックされたら全タブのactiveを削除する

全パネルのactiveを削除する

クリックされたタブにactiveを付ける

対応するパネルにもactiveを付ける

です。

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

課題のURLはこちら↓

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

課題の完成イメージ↓

tab

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

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

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

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

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

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

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

Treat Myself