CSS 및 jQuery를 사용하여 현재 페이지 링크를 강조하는 방법은 무엇입니까?

CSS로 현재 페이지 링크 구별

웹 디자인 영역에서는 현재 페이지에 해당하는 링크를 다른 링크와 다르게 강조 표시하는 것이 바람직한 경우가 많습니다. 이렇게 하면 탐색 가시성이 향상되고 페이지 위치를 명확하게 표시할 수 있습니다.

다음 예를 고려해 보세요.

<code class="html"><ul id="navigation">
  <li class="a"><a href="/">Home</a></li>
  <li class="b"><a href="theatre.php">Theatre</a></li>
  <li class="c"><a href="programming.php">Programming</a></li>
</ul></code>

CSS를 사용하여 원하는 효과를 얻으려면 컨테이너:

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

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

이 코드는 페이지의 모든 링크에 고유한 색상과 호버 효과를 적용합니다. 그러나 현재 페이지 링크를 강조 표시하기 위해 jQuery를 사용할 수 있습니다.

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

이 스크립트는 href 속성이 있는 모든 링크를 반복하고 링크의 URL이 현재 페이지의 URL과 일치하는지 확인합니다. 그렇다면 원하는 대로 스타일을 지정할 수 있는 "활성" 클래스를 링크에 추가합니다.

다음 CSS를 사용하여 활성 링크의 스타일을 지정할 수 있습니다.

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

결합하여 CSS와 jQuery를 사용하면 현재 페이지 링크를 시각적으로 쉽게 구분할 수 있어 사용자 경험과 사이트 탐색이 향상됩니다.

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