[JavaScript] 클릭 시 class에 active 추가하기

네비게이션 바에서 요소 클릭 시 해당 요소의 색상이 바뀌는 걸 구현해보고자 했다.

 

바란 것 : 메인 / 마이페이지 등 요소에서 메인 클릭 시 -> 페이지 이동 & 메인 글자 색상 바뀌기

 

클릭 시 클릭한 요소의 class에 active를 추가해주고, 그 전에 클릭한 요소의 class에서 active를 제거해주었다.

 

참고 글 : https://www.w3schools.com/howto/howto_js_active_element.asp

How To Add Active Class To Current Element

 

if (process.browser){
  var navContainer = document.getElementById("NavBar");
  var menus = navContainer.getElementsByClassName("navMenu");
  for (var i = 0; i < menus.length; i++) {  
    menus[i].addEventListener("click", function() {  
    var current = document.getElementsByClassName("active");  
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");  
    }  
    this.className += " active";  
    });  
  }  
}