Tabs - функционал табов

/**
 * Табы
 * 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')
                    }
                }
            })
        }
    }
}