CSS를 사용하여 현재 페이지 링크의 색상 변경

현재 페이지 링크의 모양을 조작하는 것은 일반적인 CSS 스타일 요구 사항입니다. 다른 페이지 링크와 구별하기 위해 사용자는 종종 텍스트와 배경의 색상을 바꾸는 것을 선호합니다. 귀하의 스타일 요청에 대한 포괄적인 솔루션은 다음과 같습니다.

CSS 스타일링

현재 페이지 링크의 스타일을 지정하려면 스타일시트에 다음 CSS 규칙을 추가하세요.

li a {
  color: #A60500;
}

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

jQuery 스크립트

제공된 jQuery 스크립트를 사용하면 현재 페이지 링크를 식별하고 여기에 클래스를 동적으로 추가할 수 있습니다.

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

특정 페이지 구조에 따라 링크 선택기($("[href]"))를 구체화해야 할 수도 있습니다. 예를 들어, 링크가 nav 요소 내에 포함된 경우 선택 범위를 $("nav [href]")로 좁힐 수 있습니다.

페이지에서 URL 매개변수를 사용하는 경우, 비교하기 전에 해당 매개변수를 제거할 수 있습니다. 현재 페이지 링크가 인식되는지 확인하는 링크:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

이 접근 방식을 사용하면 각 페이지의 CSS 스타일을 개별적으로 수정할 필요가 없습니다.