Skip to content

Instantly share code, notes, and snippets.

@aau8
Last active May 2, 2022 03:22
Show Gist options
  • Save aau8/5b3895b480b4ddb49537fddd295e4f26 to your computer and use it in GitHub Desktop.
Save aau8/5b3895b480b4ddb49537fddd295e4f26 to your computer and use it in GitHub Desktop.
/**
* Табы
* data-tab - атрибут, который должен иметь контейнер с кнопками и карточками
* data-tab-btn - атрибут кнопки
* data-tab-card - атрибут карточки
* Значение атрибутов связаныых кнопки и карточек должны быть одинаковыми
*/
tabs()
function tabs() {
const tabElems = document.querySelectorAll('[data-tab]')
for (let i = 0; i < tabElems.length; i++) {
const tab = tabElems[i];
const btnElems = tab.querySelectorAll('[data-tab-btn]')
const allCards = tab.querySelectorAll('[data-tab-card]')
for (let i = 0; i < btnElems.length; i++) {
const btn = btnElems[i];
btn.addEventListener('click', e => {
const btnData = btn.dataset.tabBtn
const cardElems = tab.querySelectorAll(`[data-tab-card=${btnData}]`)
removeAll(btnElems, '_active')
removeAll(allCards, '_show')
btn.classList.add('_active')
if (btnData === 'all') {
for (let i = 0; i < allCards.length; i++) {
const card = allCards[i];
card.classList.add('_show')
}
}
else {
for (let i = 0; i < cardElems.length; i++) {
const card = cardElems[i];
card.classList.add('_show')
}
}
})
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment