javascript를 사용하는 탐색상의 활성 링크

Question

내 사이트 탐색에 현재 페이지에 대한 활성 링크가있는 방법을 알아낼 수 없습니다.

이것은 나를 위해 일하는 유일한 코드이지만, 항상 "활성"클래스와 2 개의 링크가 있습니다. 현재 페이지 만 활성화하고 싶습니다. 어떤 도움 http://champhero.wpengine.com

감사 :

<script> 
function setActive() { 
aObj = document.getElementById('nav').getElementsByTagName('a'); 
for(i=0;i<aObj.length;i++) { 
if(document.location.href.indexOf(aObj[i].href)>=0) { 
    aObj[i].className='active'; 
    } 
} 
} 

window.onload = setActive; 
</script> 

가 여기 내 준비 사이트입니다 :

여기 내 코드입니다!

Answer 1

인덱스를 확인하고 있습니다.

function setActive() { 
    var aObj = document.getElementById('nav').getElementsByTagName('a'); 
    for (var i = 0; i < aObj.length; i++) { 
     if (document.location.href == aObj[i].href) { 
      aObj[i].className = 'active'; 
     } 
    } 
} 

참고 : 따라서, URL http://champhero.wpengine.com/ 항상 그냥 평등을 선택하면 http://champhero.wpengine.com/the-enemies/

처럼 다른 사람에 포함되어, 그것은 작동합니다, 당신은 'var에'로컬 변수를 선언하지 않은 그들에게 전역을하고 잠재적으로 환경에 불안정합니다. 내 제안 된 코드에서이를 변경했습니다.

Answer 2

a 태그 href에는 전체 링크가 포함되어 있으므로 아래와 같이 평등을 확인할 수 있습니다. 이 조각은 모든 앵커에 클래스를 적용하지만이

Answer 3

<script> 
window.onload = function(){ 
    var anchors = document.getElementsByTagName('a'); 
    for (var i = 0; i < anchors.length; ++i) 
     if (anchors[i].href === window.location.href) 
      anchors[i].className += ' active'; 
}; 
</script> 

다른 모든 링크 (http://champhero.wpengine.com/pagelink) 존재이기 때문에

<script> 
    function setActive() { 
    aObj = document.getElementById('nav').getElementsByTagName('a'); 
    for(i=0;i<aObj.length;i++) { 
     if(document.location.href === aObj[i].href) { 
     aObj[i].className='active'; 
     } 
    } 
    } 

    window.onload = setActive; 
</script> 

홈 페이지 탐색 링크 (http://champhero.wpengine.com/)는 모든 페이지에 강조 표시됩니다. 네비게이션 바에있는 것들을 위해서 특정 CSS 클래스를 제공하여 다음과 같이 연결하십시오 :

<script> 
window.onload = function(){ 
    var nav_links = document.querySelectorAll('.nav-link'); 
    for (var i = 0; i < nav_links.length; ++i) 
     if (nav_links[i].href === window.location.href) 
      nav_links[i].className += ' active'; 
}; 
</script>