jQuery 현재 페이지 하이라이트

Question

jQuery를 사용하여 현재 페이지를 강조 표시하려면 어떻게해야합니까? 즉, 현재 페이지의 a 요소에 "현재"클래스를 추가합니다. 대신 디렉토리 (즉 articles.html) (즉 ../articles/)

<div id="nav"> 
     <ul> 
      <li><a href="../articles/">Articles</a></li> 
      <li><a href="../photos/">Photos</a></li> 
      <li><a href="../info/">Earthquake Info</a></li> 
     </ul> 
    </div> 

내가 연구 한 여러 가지 접근 방법,하지만 그들 중 대부분은 페이지에 링크에 의존 :

여기 내 코드입니다.

본문/ID 클래스 메서드를 본 적이 있고 자동 jQuery 솔루션을 선호합니다.

Here's my site.

Answer 1

document.location.href으로 문자열을 분할 할 수 있습니다.

요소를 통해 루프를 실행하면 요소를 스플라인 된 문자열과 비교하고 클래스를 오른쪽 요소에 추가하십시오.

Answer 2

this으로 처리해야합니다.
폴더 작업을 위해 파일을 약간 조정해야 할 수도 있습니다.

Answer 3

이것은 내 개인 사이트에서 수행하는 방법입니다. (링크 Here)

<ul id="navLinks"> 
    <li><a id="homeLink" href="/">Home</a></li> 
    <li><a id="blogLink" href="/blog/">Blog</a></li> 
    <li><a id="photosLink" href="/photo-gallery/">Photos</a></li> 
    <li><a id="portfolioLink" href="/portfolio/">About Me</a></li> 
    <li><a id="contactLink" href="/contact/">Contact</a></li> 
</ul> 



var section = window.location.pathname; 

if (section == '/') { $('#homeLink').attr('class', 'selected'); } 
if (section.substring(0, 5) == "/blog") { $('#blogLink').attr('class', 'selected'); } 
if (section.substring(0, 9) == "/articles") { $('#blogLink').attr('class', 'selected'); } 
if (section.substring(0, 8) == "/contact") { $('#contactLink').attr('class', 'selected'); } 
if (section.substring(0, 14) == "/photo-gallery") { $('#photosLink').attr('class', 'selected'); } 
if (section.substring(0, 10) == "/portfolio") { $('#portfolioLink').attr('class', 'selected'); } 

Answer 4

내가 jQuery를 솔루션을 찾을 수 있지만, 나는 좋은 Javascript alternative을 발견했다.