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

현재 페이지의 CSS 링크 스타일링

웹 디자인 영역에서 스타일 링크는 종종 사용자 경험을 향상하고 웹사이트 미학. 현재 페이지의 링크 모양을 다른 페이지와 차별화하려는 경우 CSS가 간단한 솔루션을 제공합니다.

CSS로 구현

다음 CSS 규칙을 추가하면 다음이 가능해집니다. 현재 링크의 텍스트와 배경색을 바꾸려면 페이지:

li a {
  color: #A60500;
}

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

예

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

CSS 규칙이 적용된 상태에서 현재 페이지에 대한 링크 페이지(예: "/programming.php")는 페이지가 로드되거나 사용자가 위에 마우스를 올리면 텍스트와 배경색이 바뀌게 됩니다.

jQuery를 사용한 동적 스타일링

보다 동적인 접근 방식을 선호하는 경우 jQuery는 유사한 결과를 얻기 위해 다음 코드를 제공합니다.

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

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

이러한 기술을 활용하면 현재 페이지의 링크 모양을 쉽게 변경할 수 있어 웹 사이트의 시각적 매력과 사용자 경험을 모두 향상시킬 수 있습니다. .

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