은 현재 페이지를 기준으로 메인 메뉴의 링크에서 다른 색상으로 강조 표시합니다.

Question

메인 메뉴의 모든 링크를 현재 페이지를 기준으로 다른 색상으로 강조 표시하는 방법은 무엇입니까?

예를 들어 현재 페이지가 우리에게 연락 할 때 주 메뉴에서 contact us 링크 색을 빨간색으로 변경하면 현재 페이지가 우리와 관련되어있는 경우 주 메뉴에서 about us 링크 색을 주황색으로 변경합니다.

Answer 1

a:active : 링크를 클릭하고 누르고 있습니다.
a:visited : 링크를 이미 방문한 경우. 중 하나에 만 해당 li (링크)이 새로운 클래스 .current 추가

.current { 
    color: red; 
    background-color: #000000; 
} 

- 당신이 현재 페이지에 해당하는 링크가 강조 표시하려면

, 당신은 링크에 일부 특정 스타일을 정의 할 수 있습니다 서버 측 또는 클라이언트 측 (javascript/jquery 사용). 당신이 linkswith을 통해 다음과 같은 코드를 반복하는 .each 기능을 사용할 수 JQuery와 함께

:

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

페이지의 구조와 사용 된 링크에 따라, 당신은 같은 링크의 선택 범위를 좁힐 수있다 :

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

: 당신이 URL 매개 변수를 사용하는 경우

$("nav [href]").each ... 

것은, 이러한를 제거 할 필요가있다

이렇게하면 각 페이지를 편집 할 필요가 없습니다. 접근 방법이 많이 있습니다

source

Answer 2

, 그것은 당신의 코드를 보지 않고 가장 적합한 말하기 어렵다.

각 페이지에서 일부 자바 스크립트를 사용하여 링크 클래스를 추가하거나 변경할 수 있습니다. 대한

var pathname = window.location.pathname; 

:

먼저 검색 현재 URL 경로 : 당신은이 작업을 수행하기 위해 자바 스크립트를 사용할 수

var contactLink = document.getElementById("contactUs"); 
contactLink.addClass("orangeLink"); 

Answer 3

처럼 저희에게 연락 페이지를 사용 AA 스크립트에 대한 예를 들어

예를 들어 "/contact.html"을 반환하면 이 값을 사용하여 어떤 항목을 하이라이트 처리할지 결정할 수 있습니다.

if(pathname == "/contact.html"){ 
    document.getElementById("contact").addClass("hilighted"); 
} 

등등.

Answer 4

현재 페이지를 기반으로 메뉴에 활성 클래스를 추가 할 수 있습니다.

연락처 페이지에있는 경우 활성 클래스를 추가하여 당사에 문의하십시오. 우리에 대해서도 동일합니다. 그런 다음 해당 활성 클래스에 대한 CSS를 수행하십시오.예를 들어

당신이 다음 접촉 우리를 페이지에있는 경우 : -

<ul> 
    <li class="home"><a href="home.html">Home</a></li> 
    <li class="contact active"><a href="contact-us.html">Contact Us</a></li> 
    <li class="about"><a href="about.html">About Us</a></li> 
</ul> 

은 이제 일부 CSS를 할 수는 : -

.contact.active{ 
    color : red; 
} 
.about.active{ 
    color : orange; 
} 

그것은 당신을 위해 일 것입니다.