현재 URL을 기반으로 탐색 링크에 '활성' 클래스를 동적으로 추가하는 방법은 무엇입니까?

현재 URL을 반영하기 위해 활성 탐색 클래스 추가

웹사이트를 탐색하려면 종종 현재 페이지를 시각적으로 표시해야 하며, 이는 다음을 통해 수행할 수 있습니다. 해당 메뉴 항목에 "활성" 클래스를 추가합니다. 이 문서에서는 JavaScript를 사용하여 이 기능을 구현하는 방법을 보여줍니다.

"manageIS.aspx" 페이지에서 "관리" 링크가 "활성"으로 표시되어야 하는 아래 탐색 메뉴의 예를 살펴보세요.

<ul>

다음 JavaScript 스니펫은 원하는 효과를 달성합니다.

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

이 코드는 현재 페이지의 "현재" 변수에 대한 경로명입니다. 그런 다음 모든 메뉴 링크를 반복하고 "href" 속성이 현재 경로와 일치하는지 확인합니다. 일치하는 항목이 발견되면 해당 링크에 "active" 클래스가 추가됩니다.

질문에 제공된 원본 JavaScript와 달리 이 접근 방식은 클릭 이벤트에 의존하지 않으며 페이지 로드 시 실행됩니다. 따라서 "active" 클래스는 페이지 수명 전반에 걸쳐 지속되어 항상 현재 페이지를 명확하게 표시합니다.

위 내용은 현재 URL을 기반으로 탐색 링크에 '활성' 클래스를 동적으로 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!