메뉴 선택 시 선택 한 메뉴 배경색 주기

메뉴 클릭 시 현재 선택된 메뉴의 바탕색을 주고 싶었다. 

 

html태그에 아이디와 클래스 값을 주고

<div id="menuBtn1" class="menus click-menu" @click="mvProfile">프로필</div>
<div id="menuBtn2" class="menus" @click="mvChart">차트</div>
<div id="menuBtn3" class="menus" @click="mvBoard">나의 게시글</div>
<div id="menuBtn4" class="menus" @click="mvAlarm">알림</div>

색을 추가하고 삭제하는 함수를 만든 뒤

    const removeColor = () => {
      const menus = document.getElementsByClassName("menus");
      for (var i = 0; i < menus.length; i++) {
        menus[i].classList.remove("click-menu");
      }
    };
    const addColor = (id) => {
      const btn = document.getElementById(id);
      btn.classList.add("click-menu");
    };

클릭 이벤트에 추가하기

    const mvProfile = () => {
      removeColor();
      addColor("menuBtn1");
      router.push({ name: "mypage-profile" });
    };

 

분명 더 쉬운 방법도 있을테지만,,,, 일단 성공,,,