CSS를 사용하여 현재 페이지 링크의 스타일을 어떻게 다르게 지정할 수 있습니까?

CSS를 사용하여 현재 페이지의 링크 스타일 사용자 정의

웹 개발자는 종종 현재 페이지의 링크 모양을 다른 링크와 차별화하고 싶어합니다. . 일반적인 접근 방식 중 하나는 텍스트 색상과 배경 색상을 바꾸는 것입니다.

CSS로 이 효과를 얻으려면 다음 접근 방식을 고려하세요.

li a {
  color: #A60500;
}

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

이 코드는 웹페이지의 모든 링크에 빨간색(#A60500) 텍스트 색상입니다. 사용자가 링크 위로 마우스를 가져가면 텍스트 색상이 검은색(#640200)으로 바뀌고 배경이 검은색(#000000)으로 변경됩니다.

HTML에서 여러 링크가 있는 탐색 메뉴를 만듭니다.

<ul>

또는 jQuery를 사용하여 현재 페이지에 클래스를 동적으로 추가할 수 있습니다. link:

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

이 스크립트는 페이지의 모든 링크를 반복하고 현재 URL과 일치하는 클래스에 활성 클래스를 추가합니다. 그런 다음 CSS를 사용하여 활성 링크의 스타일을 다르게 지정하여 현재 페이지 링크의 모양을 사용자 정의할 수 있습니다.

위 내용은 CSS를 사용하여 현재 페이지 링크의 스타일을 어떻게 다르게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!