タブ切替

中段 / 目安 30分

「メニューとアクセスとお知らせ、ぜんぶ縦に並んでて長いの」と陽葵さん。「タブでパッと切り替わるやつ、あるでしょう。あれにしたい。今風でしょ?」

タブは、見た目こそ今風ですが、中でやっていることは驚くほど素朴です。一度ぜんぶ隠してから、選ばれた1つだけを出す。これだけです。

順番を逆にすると必ず壊れます。「押されたパネルを出す」だけを書くと、前に出ていたパネルが残って2つ並びます。「押されていないパネルを隠す」を条件分岐で書くと、パネルが増えるたびに分岐が増えます。だから、まず全部隠す、それから1つ出す。この順で書くと、パネルが何枚あっても同じコードで動きます。

タブの側も同じ考え方です。全部から active を外してから、押されたタブにだけ付けます。

HTML は読み取り専用で、次の形で用意してあります。タブのボタンは .tab で、それぞれ data-target にパネルの id が書いてあります。パネルは .panel で、隠すためのクラス hidden は CSS 側で用意ずみです。押されたボタンから dataset.target を読めば、出すべきパネルの id がそのまま手に入ります。押されたのがどれかを if で判定する必要はありません。

最初の表示はメニューが出ている状態にしてください。HTML の初期状態でアクセスとお知らせには hidden が付いています。

完成条件

• .tab のすべてにクリックのイベントを付ける
• クリックされたら、まず全部の .panel に hidden クラスを付けて隠す
• 次に、押されたタブの data-target が指す id のパネルから hidden を外す
• タブの強調も同じ順で切り替える。全部の .tab から active を外し、押されたタブにだけ active を付ける

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. すべての .tab にクリックのイベントを付ける
2. クリック時にまず全部の .panel へ hidden クラスを付けて隠す
3. 押されたタブの data-target が指すパネルから hidden を外す
4. 全部の .tab から active を外し、押されたタブにだけ active を付ける