Tabby - Event delegation

Im ersten Schritt haben wir mit einer Schleife einen EventListener auf jedes einzelne Tab gelegt. Das muss nicht unbedingt sein – wir können die Event Delegation nutzen und einfach das übergeordnete Element abfragen:

const tabs = Array.from(tabby.querySelectorAll('.tab'));

tabs.forEach(tab => {
  tab.addEventListener('click', e => {
    // do sth.
  });
});

Das geht besser:

const tabsList = tabby.querySelector('.tabs');

tabsList.addEventListener('click', e => {
  // do sth.
});

Nun führen wir wieder dieselben Schritte wie zuvor aus:

1. den geklickten Tab finden
2. den zugehörigen Tab-Content finden
3. is-selected entfernen und hinzufügen

Um den geklickten Tab zu finden, verwenden wir e.target:

tabsList.addEventListener('click', e => {
  const tab = e.target;
  console.log(tab);
})

Sobald wir den geklickten Tab identifiziert haben, können wir den zugehörigen Tab Content filtern:

tabsList.addEventListener('click', e => {
  const tab = e.target;
  const target = tab.dataset.target;
  const tabContent = tabby.querySelector('#' + target);
});

Jetzt entfernen wir is-selected von den anderen Tabs und fügen is-selected zum geklickten Tab dazu:

const tabs = Array.from(tabby.querySelectorAll('.tab'));

tabsList.addEventListener('click', e => {
  // ...
  // selects a tab
  tabs.forEach(t => t.classList.remove('is-selected'));
  tab.classList.add('is-selected');
});

Schließlich entfernen wir noch `is-selected von den anderen Tab-Contents und fügen es zum ausgewählten Tab-Content hinzu:

const tabContents = Array.from(tabby.querySelectorAll('.tab-content'));

tabsList.addEventListener('click', e => {
  // ...
  // selects the corresponding tab content
  tabContents.forEach(c => c.lassList.remove('is-selected'));
  tabContent.classList.add('is-selected');
});