Tabby

TABBY

Some text, maybe?

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quas harum id voluptatibus modi animi rerum maiores? Necessitatibus illum earum et animi accusamus, enim ut, voluptatibus cumque possimus alias dolorem iusto numquam hic laborum error, neque impedit odit libero iste odio dolore modi? Quo quod incidunt vitae? Dolor, iure qui?

Tab 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa corporis illum tempore maxime velit, ut voluptatem dignissimos, qui, eaque dicta odio facere delectus! Perspiciatis rerum at obcaecati quos placeat esse alias repellendus, et ipsum commodi nam, itaque in. Sint molestias ut quia doloremque soluta illum aliquid adipisci, asperiores fuga quisquam.

Tab 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem fuga necessitatibus maxime, sit atque ad doloribus ratione illo sequi aliquid nam odio est consequatur eos debitis possimus nostrum omnis explicabo id tempore. Soluta voluptas unde error blanditiis, quod at corporis similique a, obcaecati labore quasi culpa quibusdam quae, pariatur veritatis?

Was ist zu tun?

  1. Was muss logisch passieren?
  2. Wie zeichne ich ein Zielelement aus?
  3. Welches HTML brauche ich?
  4. Welches CSS brauche ich?
  5. Wie schreibe ich das JS, Schritt für Schritt, damit die Komponente funktioniert?
Was muss logisch passieren?
  1. Ich klicke auf einen Tab
  2. Der Tab braucht einen Event-Listener
  3. Ich muss wissen, welcher Tab geklickt wurde ... das sagt mir die Konsole
  4. ... und welcher Tab-Content dazugehört - den muss ich identifizieren (siehe unten)
  5. Die Klasse .is-selected muss vom aktuell angezeigten Tab entfernt werden (und sicherheitshalber loopt man gleich alle Tabs durch)
  6. Der geklickte Tab muss die Klasse .is-selected bekommen
  7. Die letzten beiden Schritte sind auch auf den Tab-Content anzuwenden:
    1. Die Klasse .is-selected wird von allen Tab-Inhalten entfernt.
    2. Der Tab-Content, der zum geklickten Tab gehört, bekommt die Klasse .is-selected
Wie identifiziere ich den zugehörigen Tab-Content?
  • Jeder Tab bekommt ein individuelles [data-attribute].
  • Jeder Tab-Content bekommt eine id, die gleich lautet wie das dazugehörige [data-attribute].
  • Aus dem geklickten Tab wird mit dataset.target das [data-attribute] herausgelesen und in einer Variablen gespeichert (z.B. target)
  • Der zugehörige Tab-Content wird mit querySelector gesucht, als Selector wird '#' + target verwendet (zusammengesetzt ergibt das dann #target).
Welches HTML brauche ich?
  • Buttons zum Auswählen der Tabs
  • zugehörige Tabpanels mit Inhalt
Welches CSS brauche ich?
  • Der aktive Button .is-selected muss eine entsprechende Gestaltung bekommen
  • Die nicht aktiven Tabpanels müssen versteckt werden z.B. mit hidden oder display: none;
Welches JavaScript brauche ich?
  • Ein Klick auf einen Button macht das zugehörige Tabpanel sichtbar
  • Alle inaktiven Buttons müssen eine entsprechende Klasse bekommen
  • Alle inaktiven Tabs müssen eine entsprechende Klasse bekommen