[jQuery] 주소에 따라 a태그 active 하기

yoonsh·2022년 10월 21일
0

주소 네임에 따라 사이드 메뉴에 active가 달려야 할 때가 있다

이건 주소창 예시

<a href="어쩌구~?q=notice"></a>
<a href="어쩌구~?q=search"></a>
<a href="어쩌구~?q=qna"></a>

이건 메뉴 리스트

주소와 href의 "=" 뒤에 있는 단어를 비교해서 .active를 추가해보기로 한다

jQuery(document).ready(function(){
  // 현재 주소창 href 단어 분리 ("=" 기준)
  var _defaulturl = location.href;
  var _coustomUrl = _defaulturl.substring(_defaulturl.indexOf("=")+1);

  // a태그 href 단어 분리 ("=" 기준)
  jQuery(".aside-box ul li a").each(function(){
      var _thisUrl = jQuery(this).attr("href");
      var _thisUrlWord = _thisUrl.substring(_thisUrl.indexOf("=")+1);
      // 주소창, a태그 비교 후 같으면 active 추가
      if ( _thisUrlWord == _coustomUrl ) {
          jQuery(this).addClass("active");
      }
  });
});

주요함수
.substring(indexStart,indexEnd) string 객체의 시작 인덱스 ~ 종료 인덱스 전 까지 커트
.indexOf() 문자열에서 특정 문자의 위치 찾기

풀어보자면 "=" 위치에서 +1을 했으니 그 뒤에서부터 끝까지 커트한다

그렇게 추출해서 저장해놓은 var = _coustomUrl , var = _thisUrlWord 단어들을 비교해서
if문 돌리고 .active 추가하면



tmi 하나 남기자면 오늘 문래동 갑니다 ㅋ 그럼 이만

profile
프론트짱이될거야

0개의 댓글