url을 가져와서 이벤트 적용하기

nav메뉴나 gnb를 누르면

해당 페이지로 이동했을 경우에도 active를 시켜놓고 싶을때 사용하였다.

(이 경우는 url에 gnb 메뉴와 같은 글자가 있었을때 사용함)

html

<div class="header">
  <ul class="gnb">
    <li class="active">main</li>
    <li>about</li>
    <li>contact</li>
  </ul>
</div>

script

var pageUrl = window.location.href; //창의 url을 가져온다.
$(window).on('load', function(){ //load가 되었을때 실행
    $('.header .gnb > li').siblings('li').removeClass('active'); //다른 active가 있으면 지워준다.
    
    if (pageUrl.indexOf('about') > -1) { //url에 about이라는 글자가 있으면 실행
        $('.header .gnb > li').eq(1).addClass('active');
    } else if (pageUrl.indexOf('contact') > -1) { //url에 contact라는 글자가 있으면 실행
        $('.header .gnb > li').eq(2).addClass('active');
    } else {
        $('.header .gnb > li').eq(0).addClass('active'); 
        //메인 url은 main이라는 단어가 들어가지 않아서 모든 조건이 아닐때 실행하도록 함
    }
});

** window.location.href은 http~~ 부터 전체 url을 가져온다. 이 속성을 이용하여 다른 다양한 이벤트들을 줄 수 있을것 같다.

** indexOf() 메서드는 호출한 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환함