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

CSS를 사용하여 현재 페이지 링크 스타일 다르게 지정

웹 사이트를 탐색할 때 현재 페이지를 다른 페이지와 시각적으로 구별하면 사용자 경험이 향상됩니다. 이 기사에서는 현재 활성 페이지의 링크 색상을 변경하는 CSS 솔루션을 살펴봅니다.

다음 HTML 구조를 고려하세요.

<ul>

시작하려면 CSS를 사용하여 모든 링크의 스타일을 지정하겠습니다. :

li a {
  color: #A60500;
}

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

이제 현재 페이지 링크에 대한 CSS를 다루겠습니다. jQuery를 사용하면 모든 링크를 반복하여 해당 링크의 href 속성이 현재 페이지의 URL과 일치하는지 확인할 수 있습니다.

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

이를 추가하면 현재 페이지를 가리키는 링크가 "active" 클래스를 받게 됩니다. 그런 다음 해당 클래스가 있는 요소의 링크 색상을 변경하도록 CSS를 향상할 수 있습니다.

.active {
  color: #FFEE00;
}

그러나 다음 고려 사항에 유의하는 것이 중요합니다.

<ul>

페이지 구조에 따라 , 링크 선택 범위를 좁혀야 할 수도 있습니다.

URL 매개변수를 사용하는 경우 정확한 확인을 위해 해당 매개변수를 제거해야 할 수도 있습니다. 매칭합니다.

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