CSS에서 현재 페이지 링크의 스타일을 지정하는 방법은 무엇입니까?

CSS에서 현재 페이지 링크 스타일 지정: 종합 가이드

디자이너는 종종 현재 페이지의 링크를 다른 링크와 구별하여 사용자 경험을 향상시키려고 합니다. 다른 것들은 활성 상태를 강조합니다. 이를 달성하기 위한 한 가지 효과적인 접근 방식은 유연성과 손쉬운 사용자 정의를 제공하는 CSS를 이용하는 것입니다.

현재 페이지 링크의 모양을 변경하기 위해 CSS는 간단하면서도 강력한 솔루션을 제공합니다.

<code class="css">a:active {
  color: #A60500;
  background-color: #000000;
}</code>

이 코드에서는 현재 활성화된 링크가 검정색 배경에 적갈색 텍스트로 표시됩니다. 이러한 시각적 차별화는 사용자가 사이트를 보다 직관적으로 탐색하는 데 도움이 됩니다.

보다 고급 수정을 위해 jQuery는 훨씬 더 강력한 제어 기능을 제공합니다. .each 함수를 활용하면 모든 링크를 반복하고 현재 페이지의 URL과 일치하는 링크에 활성 클래스를 동적으로 적용할 수 있습니다.

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

이 코드는 활성 클래스가 링크에만 추가되도록 보장합니다. 페이지 구조나 사용된 특정 URL에 관계없이 현재 페이지에 해당합니다.

링크 선택을 더 세분화하려면 $("nav [href]")와 같은 보다 구체적인 선택기를 사용하는 것이 좋습니다. 링크는 탐색 요소 내에 있습니다. 또한 URL에 매개변수가 포함된 경우 이러한 변형을 고려하기 위해 URL을 비교하기 전에 매개변수를 제거해야 할 수도 있습니다.

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