현재 페이지의 링크 색상을 동적으로 변경하는 방법은 무엇입니까?

현재 페이지의 링크 색상 변경

현재 보고 있는 페이지의 링크 모양을 수정하면 다음을 제공하여 사용자 경험을 향상할 수 있습니다. 시각적 단서. 일반적인 기술 중 하나는 텍스트와 배경의 색상을 바꾸어 현재 링크를 돋보이게 하는 것입니다.

이 효과를 얻으려면 CSS와 JavaScript를 사용할 수 있습니다. CSS는 원하는 링크 모양을 정의하고 JavaScript는 현재 페이지를 동적으로 식별하여 그에 따라 스타일을 적용합니다.

이 솔루션을 구현하는 방법은 다음과 같습니다.

1. CSS 스타일 지정:

   • 모든 링크의 기본 스타일 정의:

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

   • 활성 링크의 스타일 지정:

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

2. JavaScript:

   • 링크를 반복하려면 .each 함수를 사용하세요.

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

   • 선택적으로 링크 선택 범위를 좁힙니다.

     <code class="javascript">$("nav [href]").each ...</code>

   • 필요한 경우 URL 매개변수를 처리합니다.

     <code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

이 솔루션을 구현하면 현재 페이지 링크가 다른 페이지 링크와 시각적으로 구별되어 사용자에게 명확한 표시를 제공합니다.

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