タブ切り替えを構成する要素
- 切り替えタブ
- liタグで表現
- タブごとの内容
- 特にタグの指定は無し
Step1 切り替え前のHTMLを書く
- 切り替えタブは横並びで記述
- 親ノードにdisplayをflexに指定
- 内容ごとのidとリンクするようにデータ属性を付与
- タブごとの内容
- divタグなどで記述
- 内容ごとにidを付与
Step2 選択されているタブと選択されていないタブにCSSをそれぞれ適用
- 選択されているタブに対してCSSを適用
- クラス名をactiveとして、何らかの色などをつける
- コンテンツ部分を整える
- 選択されていないタブに対してCSSを適用
- クラス名をhiddenとして、displayをnoneにする
- マウスを置いたときに押せる感を出す
- aタグはホバーしたときにマウスがポインターになる
- ホバーしたときに透明になるようにする
- 例:
opacity: 0.5;
- 例:
Step3 javascript実装
- タブ全てにクリックイベントを設定する
- タブ
- aタグの規定の動作(ページ遷移)をキャンセルする(preventDefault)
- 全てのタブからactiveクラスを削除(forEach,classList.remove)
- クリックされたノードにactiveクラスを付与(classList.remove)
- 内容
- 全ての内容からactiveクラスを削除(forEach,classList.remove)
- クリックされたノードのデータ属性の値を取得し、activeクラスを付与(getElementById,classList.add)
- タブ