学習[40]日目

本日の学習内容

• javascriptを用いた機能実装

今日はjavascriptを用いて簡単な機能の実装をするための仕組みを学習しました。

実装したのはタブです。

この機能を実装した際の手順が下記になります。

1.タブとしての設定したい要素DOM要素を取得して、変数で定義します。

2.切り替えという処理を関数に定義します。

　ここで処理内容を以下に記述していく前に理解してかなくてはいけないと

　感じた点をまとめます。

　例えば、

　タブ1と2と3それぞれのタブに対応する内容を含んだコンテンツ1と2と3があります。

　htmlにてAというクラスを持つタブ要素1と

　　　　　Bというクラスを持ったタブのコンテンツ要素1

　があったとします。

　cssにてAには背景色が赤色

　　　　  Bには背景色が白色

　のプロパティが設定されていたとするともともとhtml要素である1適用されます。

　しかし、今回は選択した要素が赤色になるようにするという仕組みを作るので、

　2をクリックした際に要素1の持つAクラスを削除して、Aクラスを要素2に

　持たせるような記述をします。さらに要素1の持つBクラスも削除して、

　Bクラスをコンテンツ要素1に持たせるような記述をします。

　このようにしてタブをクリックすると上記のような感じで、にデフォルトで

　クラスが適用されていた要素のクラスを削除して、クリックした要素にクラスを

　追加するという仕組みで切り替えが行われている。

今日は、タブの切替をアップロードしようとしたのですが失敗したので、

画像なしの非常にわかりずらい文章だけのブログとなってしまったのが、残念です。

最後までお読み頂き有難うございます。