[JS] 선택한 메뉴에 active 클래스 주기

url 파악 후 해당 url일 때 active 클래스 주기

 

0. 이슈 발생

홈 active 상태

active 클래스를 주는 방법은 매우 다양하지만

해당 url 일 때 해당 아이콘에 active 클래스를 추가하게끔 구현했다.

경로에 'consult' 가 포함되어있으면 '상담하기' 버튼에 active 주기.

상담하기 active 상태

 

728x90

 

---

 

1. HTML

<div class="bottom_nav" style="gap:112px;">
   <div class="nav_btn_badge active">
        <a href="/m" class="nav_btn">
            <!-- 아이콘영역-->
            <span class="Paragraph_medium" style="font-size: 24px;">홈</span>
        </a>
  </div>
  <div class="nav_btn_badge">
      <a href="/m/sub/consult/tuition01" class="nav_btn">
          <!-- 아이콘영역-->
          <span class="Paragraph_medium" style="font-size: 24px;">상담하기</span>
      </a> 
  </div>
  <div class="nav_btn_badge">
       <a href="/m/menu" class="nav_btn">
           <!-- 아이콘영역-->
           <span class="Paragraph_medium" style="font-size: 24px;">전체</span>
       </a>
  </div>
</div>

 

 

2. JavaScript

// 현재 url(경로) 파악하기
var currentPath = window.location.pathname;

// url에 특정 문자가 포함되어 있으면
if(currentPath.includes('consult')){
     document.querySelector('.nav_btn_badge:nth-child(2)').classList.add('active');
}else{
     document.querySelector('.nav_btn_badge:first-child').classList.add('active');
}

 

* 현재 경로 파악하기

window.location.pathname

 

* 특정 문자 포함여부 확인하기

includes 함수 사용