탭 기능 구현

// 탭 기능 구현
let tags = document.querySelectorAll('.tags > span')
let itemBox = document.querySelectorAll('.data_box')

tags.forEach(tagChild => {
    tagChild.onclick = function() {
        itemBox.forEach(test => {
            let test1 =  test.getAttribute('data-filter');
            let test2 =  tagChild.getAttribute('data-filter');
            this.classList.add('active');
            if (test1 == test2) {
                test.style.display = 'block';
            } else {
                test.style.display = 'none';
            }
        })
    }
});

아직....탭쪽 버튼은 못하고있음 ㅜㅜ

// 탭 기능 구현
// 탭 기능 구현
let tags = document.querySelectorAll('.tags > span')
let itemBox = document.querySelectorAll('.data_box')

tags.forEach(tagChild => {
    tagChild.onclick = function() {
        itemBox.forEach(test => {
            let test1 =  test.getAttribute('data-filter');
            let test2 =  tagChild.getAttribute('data-filter');

            if (test1 == test2) {
                test.style.display = 'block';
            } else {
                test.style.display = 'none';
            }
            console.log()
            tags.forEach(active2 => {
                active2.classList.remove('active')
            })
            this.classList.add('active');
        })
    }
});

어째 구현은 했는데..이게 맞는지 모르겠다ㅜㅜ