for 반복문 이부분 자바스크립트로 구성해봤는데요

[성경환]

const tab1 = document.querySelectorAll('.tab-button')[0];
const tab2 = document.querySelectorAll('.tab-button')[1];
const tab3 = document.querySelectorAll('.tab-button')[2];

const content1 = document.querySelectorAll('.tab-content')[0];
const content2 = document.querySelectorAll('.tab-content')[1];
const content3 = document.querySelectorAll('.tab-content')[2];

tab1.addEventListener('click', () => {
  tab2.classList.remove('orange');
  tab3.classList.remove('orange');
  tab1.classList.add('orange');

  content2.classList.remove('show');
  content3.classList.remove('show');
  content1.classList.add('show');
});

tab2.addEventListener('click', () => {
  tab1.classList.remove('orange');
  tab3.classList.remove('orange');
  tab2.classList.add('orange');

  content1.classList.remove('show');
  content3.classList.remove('show');
  content2.classList.add('show');
});

tab3.addEventListener('click', () => {
  tab1.classList.remove('orange');
  tab2.classList.remove('orange');
  tab3.classList.add('orange');

  content1.classList.remove('show');
  content2.classList.remove('show');
  content3.classList.add('show');
});

정상적으로 동작은 되는데 이 다음 for문을 사용해서 반복 설정하는것과, 함수로 묶는 부분을

jquery로 하셔서 자바스크립트로 해보려고 했는데  반복되는 부분들을 묶어줘야 한다는건 알겠는데

그 부분을 못따라가겠네요

[codingapple]

tab1 변수말고 document.querySelectorAll 쓰고
tab1 tab2 tab3에 붙은 orange를 다 제거하라고 코드짜다보면 반복되는부분이 보일듯요 

[글쓴이]

글