JavaScript를 사용하여 내 웹사이트 메뉴에 활성 탐색 클래스를 동적으로 추가하려면 어떻게 해야 합니까?

메뉴에 동적 활성 탐색 클래스 추가

웹 페이지를 탐색할 때 현재 페이지에 해당하는 활성 메뉴 항목을 강조 표시하는 것이 일반적입니다. . 이는 사이트 계층 구조 내 현재 위치에 대한 시각적 단서를 제공하여 사용자 경험을 향상시킵니다.

이 기능을 구현하기 위해 JavaScript를 활용하여 현재 URL을 식별하고 해당 메뉴 항목에 "활성" 클래스를 추가합니다. .

JavaScript를 사용하여 활성 탐색 클래스를 추가하는 방법

jQuery의 강력한 기능을 사용하여 솔루션을 살펴보겠습니다. 라이브러리:

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

설명:

• 문서가 준비되면 스크립트가 초기화됩니다.
• location.pathname 속성은 검색합니다. 현재 페이지의 경로.
• 각 메뉴 항목의 앵커 태그를 반복합니다. ($('#nav li a')).
• 각 앵커 태그에 대해 indexOf() 함수를 사용하여 href 속성에 현재 경로가 포함되어 있는지 확인합니다.
• 일치하면 해당 앵커 태그에 "활성" 클래스가 할당됩니다.

중요 참고:

메뉴에 동일한 페이지를 가리키는 여러 링크가 포함되어 있는 경우 이 접근 방식은 활성 항목을 정확하게 판별하지 못할 수 있습니다. 이러한 시나리오에서는 이러한 사례를 처리하기 위해 추가 논리가 필요할 수 있습니다.

위 내용은 JavaScript를 사용하여 내 웹사이트 메뉴에 활성 탐색 클래스를 동적으로 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!