현재 페이지를 강조 표시하기 위해 내 탐색 메뉴에 '활성' 클래스를 추가하려면 어떻게 해야 합니까?

현재 페이지를 반영하기 위해 활성 탐색 클래스 추가

웹 개발에서는 현재 활성 페이지를 나타내는 메뉴 항목을 강조 표시하는 것이 일반적입니다. 이를 달성하려면 해당 메뉴 목록 항목에 "활성" 클래스를 동적으로 추가하면 됩니다. JavaScript를 사용하여 이를 수행하는 방법은 다음과 같습니다.

JavaScript 코드:

<br>$(function(){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 코드를 복사하여 페이지 헤더에 붙여넣기만 하면 됩니다. 코드가 <script></script> 내에 있는지 확인하세요. 태그를 지정하고 jQuery 라이브러리를 전제 조건으로 포함해야 합니다.

위 내용은 현재 페이지를 강조 표시하기 위해 내 탐색 메뉴에 '활성' 클래스를 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!