교수님이 제이쿼리로 풀이 주셨는데 괜히 자바스크립트만 쓰고 싶어서 해봤는데 잘 안됩니다.. 이유를 잘 모르겠어서 질문드립니다.
document.querySelectorAll('.tab-button')[0],addEventListener('click',function(){
for (let j = 0 ; j < 3; j ++ ){
document.querySelectorAll('.tab-button')[j].classList.remove('orange')
document.querySelectorAll('.tab-content')[j].classList.remove('show')
}
document.querySelectorAll('.tab-button')[0].classList.add('orange')
document.querySelectorAll('.tab-content')[0].classList.add('show')
})
제가 만든 1번용 탭 기능인데요 이거는 작동에 문제가 없어보였습니다
for (let i = 0 ; i < 3; i ++ ) {
document.querySelectorAll('.tab-button')[i],addEventListener('click',function(){
for (let j = 0 ; j < 3; j ++ ){
document.querySelectorAll('.tab-button')[j].classList.remove('orange')
document.querySelectorAll('.tab-content')[j].classList.remove('show')
}
document.querySelectorAll('.tab-button')[i].classList.add('orange')
document.querySelectorAll('.tab-content')[i].classList.add('show')
})
}
문제는 이걸 포문으로 한 번 더 묶으니까 무슨 버튼을 눌러도 3번이 눌러진 효과가 나옵니다
어떻게 해결해야 할까요..
