JavaScript 입문 Level2 - 탭기능 만들기

[밍팡]

 

 안녕하세요 탭기능 만들기 연습 중인데 제이쿼리로 나와있길래 질문드립니다.

document.getELementsByClassname 을 안쓰고 query selector 을 써도 에러가 나길래 어떻게해야 할지 여쭤봅니다. 감사합니다ㅠ

[codingapple]

0번버튼 누르면

0번버튼에 있던 orange 클래스명만 제거하고

0번버튼에 orange 클래스명 추가하라고 코드를 짜서 그렇습니다 

[밍팡]

 

대체 어떻게 해야할까요..?ㅠㅠㅠㅠㅠㅠㅠ 쿼리셀렉터로 가져와도 인식이 안되고 대체 어떻게해야 하죠/????

[밍팡]

for (let i =0; i<3; i++) {

document.getElementsByClassName('tab-button')[i].addEventListener('click', function() {

document.querySelector('.tab-button').classList.remove('orange');
 

 
document.getElementsByClassName('tab-button')[i].classList.add('orange');
 
 
document.querySelector('.tab-content').classList.remove('show');
 
document.getElementsByClassName('tab-content')[i].classList.add('show');

 

})

}

[codingapple]

querySelectorAll은 뒤에 [0] 같은거 붙여써야합니다 

document.querySelectorAll('.tab-button')[0].classList.remove('orange');

document.querySelectorAll('.tab-button')[1].classList.remove('orange');

document.querySelectorAll('.tab-button')[2].classList.remove('orange');

이래야 모든 버튼들에 붙은 orange가 제거됩니다 

[글쓴이]

글