CSS와 jQuery를 사용하여 현재 페이지 링크의 색상을 변경하는 방법은 무엇입니까?

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

현재 페이지의 링크를 다른 페이지와 다르게 스타일링하는 것은 일반적입니다. 웹 개발 작업. 이를 달성하는 한 가지 방법은 CSS와 jQuery를 사용하는 것입니다.

CSS 사용

현재 페이지의 링크 스타일을 지정하려면 다음 CSS를 사용할 수 있습니다.

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

이 코드는 페이지의 모든 링크 색상을 #A60500으로 변경합니다. 링크 위에 마우스를 올리면 해당 색상이 #640200으로 변경되고, 배경색이 #000000으로 변경됩니다.

jQuery 사용

jQuery를 사용할 수도 있습니다. 현재 페이지의 링크 색상을 변경하려면 이렇게 하려면 다음 코드를 사용할 수 있습니다.

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

이 코드는 페이지의 모든 링크를 반복하고 현재 페이지의 URL과 일치하는 링크에 "active" 클래스를 추가합니다. 그런 다음 CSS를 사용하여 색상을 변경하는 등 "활성" 클래스의 스타일을 다르게 지정할 수 있습니다.

참고: jQuery 코드는 페이지 구조와 구조에 따라 수정해야 할 수도 있습니다. 사용중인 링크. 올바른 링크 스타일을 지정하려면 링크 선택 범위를 좁히거나 URL 매개변수를 제거해야 할 수도 있습니다.

위 내용은 CSS와 jQuery를 사용하여 현재 페이지 링크의 색상을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!