jquery로 현재 URL을 기준으로 활성 메뉴 항목을 설정합니다.

Question

현재 활성 URL을 기반으로 내 탐색 메뉴에서 현재 링크를 강조하고 싶습니다.

내 탐색 메뉴가 순수 CSS 인 경우 많은 솔루션을 찾았지만 내 메뉴는 이미지 기반이므로 모든 링크에서 활성 클래스가 다르므로 그 부분이 내가 붙어있는 곳입니다.

누구나 내가 사용할 수있는 것을 제안 할 수 있습니까? 나는 jQuery에 대해 아주 익숙하지만 예외적으로 유용하고 내가 배운 최고의 언어 중 하나라고 생각한다.

<div id="navbar"> 
    <ul class="navmenu"> 
     <li><a class="products" href="#"></a></li> 
     <li><a class="services" href="#"></a></li> 
     <li><a class="about-us" href="#"></a></li> 
     <li><a class="contact-us" href="#"></a></li> 
     <li><a class="directory" href="#"></a></li> 
     <li><a class="blog" href="#"></a></li> 
    </ul> 
</div> 

각 a 태그는 사전로드 된 CSS 배경 이미지를 가지고 있으며, 각 클래스는 호버 기능이 있습니다.

는

Answer 1

당신은 # 후 URL의 부분을 얻기 위해 자바 스크립트를 사용할 수 :

window.location.hash 

그런 다음 다시 관련 요소를 강조하기 위해 jQuery를 사용

var linkClass = window.location.hash; 
$("."+linkClass).prop("class",linkClass+" highlight"); 

이 할 수있는 한 방법입니다 그것은 (가장 우아하지 않을 수도 있습니다). 이 같은

.pageOne { 

} 
.pageOne.highlight { 

} 

하고 HTML :

<a href="pageOne.html#pageOne">Page One</a> 

Answer 2

CSS를 기반 접근 방식은 당신을 위해 작동하지 않습니다 이유는 없습니다이 경우 귀하의 CSS는 다음과 같이 될 것이다. 부모 요소에

첫째, 장소 클래스, FEX :

<div id="navbar"> 
    <ul class="navmenu"> 
     <li><a class="products" href="#"></a></li> 
     <!-- This is the current page --> 
     <li class="current"><a class="services" href="#"></a></li> 
     <li><a class="about-us" href="#"></a></li> 
     <li><a class="contact-us" href="#"></a></li> 
     <li><a class="directory" href="#"></a></li> 
     <li><a class="blog" href="#"></a></li> 
    </ul> 
</div> 

당신은 다음 CSS 규칙을 사용할 수 있습니다

이

.current .products { /* ... */ } 
.current .services { /* ... */ } 
.current .about.us { /* ... */ } 
.current .contact-us { /* .... */ } 
.current .directory { /* ... */ } 
.current .bloc { /* ... */ } 

이 솔루션은 수 있습니다 내 마음 속에 두 가지 방법이 있습니다 당신은 각 엔트리마다 다른 스타일을 가지고 있습니다. 이미지 펙스를 변경해야한다면 좋습니다.

모든 항목에 대해 동일한 스타일이 필요하고 요소에 여러 클래스를 가진 기반으로하는 경우 다른 솔루션은 쉽게 :

<div id="navbar"> 
    <ul class="navmenu"> 
     <li><a class="products" href="#"></a></li> 
     <!-- This is the current page --> 
     <li><a class="services current" href="#"></a></li> 
     <li><a class="about-us" href="#"></a></li> 
     <li><a class="contact-us" href="#"></a></li> 
     <li><a class="directory" href="#"></a></li> 
     <li><a class="blog" href="#"></a></li> 
    </ul> 
</div> 

해당 CSS는 다음 될 것입니다 :

.current { /* ... */ }