jQuery로 현재 페이지에 활성 클래스 추가하기

Question

헤더의 현재 페이지 탐색 링크에 '활성'클래스를 추가하려고합니다. 나는 약간의 진전을 이루었지만, 나는 작은 버그를 겪고 있으며, 도움을 청할 것이다. 대답은 꽤 분명하지만, jQuery/Javascript가 처음인데 혼자서 찾는 데 어려움이 있습니다. 충분히 간단한

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav"> 
     <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
      <a href="/" class="nav-link">Me</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/work">Work</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/play">Play</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/contact">Contact</a> 
     </li> 
     </ul> 
</nav> 

:

여기 내 탐색 HTML 구조입니다.

$(function() { 
    $('nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
}); 

코드는 홈 페이지 ('나', HREF = "/"), 코드가 추가되는 문제로하지만, 내가 실행 해요, 내부 페이지에서 작동 다음은 jQuery 코드입니다 모든 탐색 링크에 대한 활성 클래스입니다.

내가 href = "/ work /"(모든 링크의 끝에 추가)를 사용하면 문제가 해결 될 것이라고 생각하지만, 그렇게하면 링크가 더 이상 작동하지 않습니다. www.sitename.com/work/.php로 이동하려고합니다.

이것은 간단한 .htaccess 또는 jQuery 픽스 중 하나입니다. 그러나 어느 것이고 구현하는 방법이 확실하지 않습니다.

감사합니다.

Answer 1

^= 선택기를 사용하고 있기 때문에 이러한 현상이 발생합니다. 즉 'startWith'를 의미하므로 모든 URL이 '/'로 시작하므로 '활성'클래스가 모두 추가됩니다.

평형 선택기로 교체하면 정상적으로 작동합니다.

$('nav li a[href="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 

Answer 2

보다 간단한 방법은 페이지 URL href를 속성 만 경로가 포함되어 있지만

$('nav li a').filter(function(){ 
    return this.href === location.href; 
}).addClass('active'); 

에 링크의 href 속성을 비교되면, DOM의 HREF 특성 전체 URL을 포함