JavaScript는 어떻게 현재 URL을 기반으로 탐색 링크에 '활성' 클래스를 추가할 수 있습니까?

URL 기반 활성 탐색 클래스 추가: JavaScript를 사용한 가이드

복잡한 웹사이트를 탐색하려면 사용자가 메뉴 내에서 현재 페이지를 효율적으로 식별해야 합니다. 구조. 사용자 경험을 향상시키려면 페이지 로드 시 현재 페이지에 해당하는 탐색 항목에 활성 클래스를 추가하는 것이 중요합니다.

제공된 JavaScript 코드는 페이지 로드가 아닌 사용자 클릭에 응답하기 때문에 불행하게도 이 목표를 달성하지 못합니다. . 이 문제를 해결하려면 현재 페이지 URL을 검사하고 활성 클래스를 적절한 메뉴 항목에 동적으로 추가하는 JavaScript를 실행해야 합니다.

다음은 이 작업을 수행하는 수정된 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');
        }
    })
})

이 코드는 jQuery를 활용하여 각 메뉴 항목의 링크를 반복하고 해당 href 속성을 현재 페이지의 경로 이름과 비교합니다. 일치하면 활성 클래스가 해당 링크에 추가됩니다.

적절한 JavaScript 실행과 논리적 비교를 활용하면 활성 클래스를 올바른 탐색 항목에 우아하게 추가하여 웹사이트 탐색 명확성을 향상시킬 수 있습니다.

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