jQuery 페이지 이동 시 class 유지

클릭 시 addClass/removeClass로 클래스를 추가했다 제거했다 하면서 색상을 변경하는데

페이지 이동이 들어간 경우에는 페이지가 이동하면서 추가한 클래스가 없어져버리는 현상이 발생

​

간단하게 생각하면 홈페이지 메뉴도 페이지 이동이 되면서 메뉴의 색상이 그대로 유지되는거긴 하다

php에서 주소확인 후 class를 주는 방법도 있다고는 하나 아직 구현해보진 못했고 (많은 페이지 이동시에는 이 방법을 써야할 듯..?)

일단 스크립트로 했으니..

 

 

HTML

<ul>
    <li><a href="active.html">active</a></li>
    <li><a href="active2.html">Active2</a></li>
    <li><a href="active3.html">Active3</a></li>
</ul>

 

 

jQuery

jQuery(function ($) {
    $("ul a").click(function(e) {
            var link = $(this);
            var item = link.parent("li");
            
            if (item.hasClass("active")) {
                item.removeClass("active").children("a").removeClass("active");
            } else {
                item.addClass("active").children("a").addClass("active");
            }

            if (item.children("ul").length > 0) {
                var href = link.attr("href");
                link.attr("href", "#");
                setTimeout(function () { 
                    link.attr("href", href);
                }, 300);
                e.preventDefault();
            }
        })
        $("ul a").each(function() {
            var link = $(this);
            if (link.get(0).href === location.href) {
                link.addClass("active").parents("li").addClass("active");
                return false;
            }
        });
});

 

주소를 분리해서 보여줘야 할 경우 link.get(0).href 대신

location.href.split('&')[0] ...

이런식으로 비교해서 사용

 

스타일 색상은 .active a에 주는 것 잊지말자

 

 

참고 사이트

https://santosh-shah.com/blog/add-class-active-on-page-refresh-jquery/

Add class active on page refresh jquery - Santosh Kumar Shah