CSS 및 jQuery를 사용하여 탐색 메뉴에서 현재 페이지 링크를 강조 표시하려면 어떻게 해야 합니까?

CSS와 jQuery를 사용하여 현재 페이지의 링크 색상을 변경하는 방법

문제:

내비게이션에서 현재 페이지를 강조 표시하기 위해 링크의 텍스트 및 배경색을 어떻게 변경합니까? 메뉴?

CSS 솔루션:

기본 스타일의 경우 CSS는 li 목록 항목 내의 모든 링크를 대상으로 하는 선택기를 제공합니다.

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

그러나 이 접근 방식은 현재 페이지 링크를 구별하지 않습니다.

jQuery 해결 방법:

현재 페이지 링크를 동적으로 강조 표시하려면 jQuery의 .each 함수를 사용할 수 있습니다.

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

이 코드는 모든 링크를 반복하고 해당 href가 현재 링크와 일치하는지 확인합니다. 페이지 URL을 선택하고 사전 정의된 클래스와 일치하도록 "활성" 클래스를 추가합니다. styles.

고려 사항:

• $("nav [href]")와 같은 CSS 선택기를 사용하여 링크 선택 범위를 좁힙니다.
• 다음을 사용하여 URL 매개변수를 제거하여 처리합니다. this.href.split("?")[0].
• 이 접근 방식을 사용하면 각 페이지에서 수동 변경을 방지하고 링크 스타일의 일관성을 유지할 수 있습니다.

위 내용은 CSS 및 jQuery를 사용하여 탐색 메뉴에서 현재 페이지 링크를 강조 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!