爆速でエンジニアを目指す男のブログ

180日間の学習でフリーランスのエンジニアとして働くため、 スクールで学習中です。 理解を深めるため、 毎日わかりやすい言葉で学習内容を発信していきます。

【Javascript初心者向け】タブメニューの作成

こんにちは、Taka@CtYKoQxLuPY62Q5です。

 

Javascriptのタブメニュー学習を開始しました!

現在、タブメニュー作成中なのですが、コード量が多い!!

一体全体、何を書いているのか分からなってきた。

 

なので、、、

どんな処理を書くべきか、ざっくり整理しました。

 

①クリックしたタブと対応するコンテンツだけを見せる処理

見せたいのは、クリックしたタブと対応するコンテンツだけですから、クリックした要素に、見せ方を定義したクラスを付与します。

 

そして、忘れちゃいけないのが、

見せたいのは1つだけなので、その前にクリックした表示させていたタブとコンテンツに付いているクラスを外すことです。

 

②何をきっかけにして処理①を行うのか。処理タイミングの設定。

どのタイミングで処理させるか設定するケースは結構あります。

どういう処理をするのかばかり考えていましたが、

いつ処理するのか考える機会が増えそうです。

 

 ・クリック時、処理が行われる。 

 ・画面立ち上げ時、処理が行われる。

 ・カーソルを上に乗せた時、処理が行われる。

 

まずは、ここを理解した上で、再度、完成形のコードをよく眺めてみようと思います。。