[jQuery] 페이지마다 해당 메뉴명 스타일 주기

[jQuery] 페이지마다 해당 메뉴명 스타일 주기

 

페이지 접근시 해당 메뉴명에 컬러를 주려고 하였으나, 페이지가 이동할 때마다 새로고침을 하여 onclick 이벤트로 불가하여 다른 방법으로 기능 구현을 하였습니다. 

• document.location.pathname으로 링크 주소를 가져와서, 변수에 담음
• a[href*='"+link+"']:  a href='xxx' xxx 에 link 의 문자열이 포함되었는지 찾기
• 포함되었을 경우, 클래스를 추가하여 style 적용
• jQuery: $(".menu ul li a[href*='"+link+"']")
• javascript: document.querySelectAll(".menu ul li a[href*='"+link+"']")

 

[attr*=value]

attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

특성 선택자 - CSS: Cascading Style Sheets | MDN

 

코드

<script>
$(function() {
 const link = document.location.pathname; //링크 주소
 $(".menu ul li a[href*='"+link+"']").addClass('on')
})
</script>