URL을 기반으로 활성 메뉴 항목을 동적으로 강조 표시하려면 어떻게 해야 합니까?

페이지 URL을 기반으로 활성 메뉴 항목을 동적으로 강조 표시

웹사이트를 개발할 때 일반적인 작업 중 하나는 현재 활성 메뉴 항목을 강조 표시하는 것입니다. 보고 있는 페이지의 URL을 기반으로 합니다. 이는 사용자 탐색 기능을 향상시키고 웹 사이트 계층 구조에서 사용자의 현재 위치에 대한 시각적 단서를 제공합니다.

솔루션 구현

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');
        }
    })
})

설명

이 코드에서 snippet:

• $(function(){...}) 페이지가 완전히 로드되면 코드가 실행되도록 합니다.
• var current = location.pathname; 현재 URL을 검색합니다. path.
• $('#nav li a').each(function(){...})는 #nav 요소 내의 모든 메뉴 항목(앵커 태그)을 반복합니다.
• var $this = $(this); 현재 메뉴 항목을 저장합니다. 처리됩니다.
• if($this.attr('href').indexOf(current) !== -1){...} 현재 URL 경로에 href가 포함되어 있는지 확인합니다. 메뉴 항목의 속성으로 활성 페이지임을 나타냅니다.
• $this.addClass('active');는 "active" 클래스를 해당 메뉴 항목에 추가합니다.

이 접근 방식은 페이지 로드 시 활성 메뉴 항목을 정확하게 강조 표시하여 일관되고 사용자 친화적인 탐색 환경을 보장합니다.

위 내용은 URL을 기반으로 활성 메뉴 항목을 동적으로 강조 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!