CSS와 JavaScript를 사용하여 현재 페이지 링크의 스타일을 어떻게 다르게 지정할 수 있습니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-13 15:49:11

원래의

790명이 탐색했습니다.

How Can I Style Current Page Links Differently Using CSS and JavaScript?

CSS로 현재 페이지 링크 강조표시

질문:

스타일을 어떻게 변경할 수 있나요? 다른 페이지와 구별하기 위해 현재 페이지의 링크를 표시합니까? 구체적으로 텍스트와 배경색을 바꾸고 싶습니다.

CSS 솔루션:

li a {
  color: #A60500;
}

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

로그인 후 복사

예:

<ul>

로그인 후 복사

자바스크립트 해결 방법:

활성 스타일을 자동으로 적용하려면 jQuery의 .each 함수를 사용할 수 있습니다.

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

로그인 후 복사

고려 사항:

<ul>

보다 정확한 링크 선택을 위해 "nav"와 같은 클래스 속성을 사용하는 것이 좋습니다. [href]".

URL에 쿼리 매개변수가 포함된 경우 다음을 사용하여 해당 매개변수를 제거하는 것이 좋습니다.

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

로그인 후 복사

이 접근 방식을 사용하면 각 페이지를 수동으로 수정할 필요가 없으며 전체 페이지에서 일관된 스타일이 보장됩니다. 페이지 URL이 다릅니다.

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