클릭 시 글 색 변하게 하기

const number = document.getElementsByClassName("video_page_link");
const categoryA = document.querySelectorAll('.category_activeA>li>a');
const categoryB = document.querySelectorAll('.category_activeB>li>a');



function handleClick(event) {
  for (var i = 0; i < number.length; i++) {
    number[i].classList.remove("clicked");
  }
  event.target.classList.add("clicked");
}
function CategoryClickA(event) {
  for (var i = 0; i < categoryA.length; i++) {
    categoryA[i].classList.remove("active");
  }
  event.target.classList.add("active");
}
function CategoryClickB(event) {
  for (var i = 0; i < categoryB.length; i++) {
    categoryB[i].classList.remove("active");
  }
  event.target.classList.add("active");
}

active ,clicked 이름 둘다 css에 색을 넣으면 해당하는 클래스에 색이 변할것이다.

참고로 querySelectorAll('.category_activeB>li>a'); 부분에서 앞에 '~~' 부분은 해당 클래스 명으로 수정해야한다!

 

function init() {
  for (var i = 0; i < number.length; i++) {
    number[i].addEventListener("click", handleClick);
  }

  for (var i = 0; i < categoryA.length; i++) {
    categoryA[i].addEventListener("click", CategoryClickA);
    // console.log(categoryA[i])
  }
  for (var i = 0; i < categoryB.length; i++) {
    categoryB[i].addEventListener("click", CategoryClickB);
    // console.log(categoryB[i])
  }
}

init();