업데이트 클래스 속성 페이지 URL을 기반으로

Question

내가 활성 메뉴 항목이 다른 다른 메뉴 항목 스타일이이 코드를 가지고 :

<div class="menu"> 
<li class="active"><a href="item1.php">Item 1</a></li> 
<li><a href="item2.php">Item 2</a></li> 
<li><a href="item3.php">Item 3</a></li> 
</div> 

보다는 각 페이지에 대해 다르게 수동으로 코드 클래스 = "활성화"를, I 앵커가 현재 URL인지 여부에 따라 클래스를 li 태그에 자동으로 삽입하는 스크립트로이 작업을 시도하고 싶습니다.

아무도 내가 이것을 시작할 수도 있음을 알고 있습니다.

Answer 1

당신은

window.location.pathname 

은 자세한 내용은 this를 참조

에서 현재의 URL 경로를 얻을 수 있습니다.

경로 이름을 알았 으면 활성 클래스를 다음과 같이 올바른 링크로 설정할 수 있습니다.

Answer 2

이 코드를 시도 할 수

$(".menu li a").each(function(){ 
    if(window.location.pathname == $(this).prop("href")){ 
     $(.menu li).removeClass("active");  
     $(this).closest("li").addClass("active"); 
    } 
}); 

희망 :

$('.menu li a').each(function(){ //check thru all <a> elements inside <li> inside .menu 

    var pagename= location.pathname.split('/').pop(); // get current pages filename (just filename) 

    if($(this).prop("href") == pagename){ 
     $('.menu li').removeClass("active"); // remove all active class  
     $(this).parent("li").addClass("active"); //put active in parent of <a> which is <li> 
    } 
});