Javascript 색상 변경기는 두 번째 클릭시에만 색상을 변경합니까?

Question

그래서 navbar가 있고 현재 탭을 강조 표시하도록 노력하고 있습니다. 그러나 javascript는 작동하지 않으며 두 번째 클릭에서만 작동하며 두 번 클릭하면 작동합니다. 보이는 Heres는 무엇

function navColourChange(id){ 
 
    var navBarLinks=document.getElementsByClassName("navLinks"); 
 
    for(i=0;i<navBarLinks.length;i++){ 
 
    navBarLinks[i].style.borderTop = "thick solid #ffffFF"; 
 
    navBarLinks[i].style.color="#2F2933" 
 
    console.log(i) 
 
    } 
 
    var link = navBarLinks[id] 
 
    link.style.borderTop = "4px solid #01A2A6"; 
 
    link.style.color="#01A2A6" 
 
}

<div class="NavBar"> 
 
    <ul> 
 
    <li> 
 
     <a href="index.html" id="navButton1" class="navLinks" onclick="navColourChange(0)">HOME</a> 
 
    </li> 
 
    <li> 
 
     <a href="about.html" id="navButton3" class="navLinks" onclick="navColourChange(1)">ABOUT</a> 
 
    </li> 
 
    <li> 
 
     <a href="Portfolio.html" id="navButton4" class="navLinks" onclick="navColourChange(2)">PORTFOLIO</a> 
 
    </li> 
 
    <li> 
 
     <a href="Contact.html" id="navButton2" class="navLinks" onclick="navColourChange(3)">CONTACT</a> 
 
    </li> 
 
    </ul> 
 
</div>

like

Answer 1

당신이 정말 찾고있는 것은 자바 스크립트/jQuery를 함께, 당신의 메뉴 바에서 현재 페이지를 highligt하는 방법 인 경우에, 당신은 뭔가를 할 수 like :

$(function() { 
    var currentPage = window.location.pathname.split('/').pop(); 
    $('.NavBar ul li a[href*="'+currentPage+'"]').css({ 
     borderTop: "4px solid #01A2A6", 
     color: "#01A2A6" 
    }); 
}); 

여기 URL에서 파일 이름을 찾은 다음 그 a-elemen을 스타일링합니다. t를 navbar에서 href와 같은 파일명을 가지고 있습니다.