Javascriptのカラーチェンジャーは2回目のクリックで色が変わるだけですか？

Question

だから私はnavbarを持って、それは現在のタブを強調表示するようにしようとしていますが、私のjavascriptは動作しません、それは2回目のクリックでのみ動作し、

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>

相続人は、あなたが本当に探していることは、あなたのナビゲーションバーで現在のページをhighligtする方法であれば、それはlike

Answer 1

を見えるものは、JavaScript/jQueryを使って、あなたが何かを行うことができます

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

URLからファイル名を見つけて、それにa-elemenそのファイル名がhrefであるnavbarのt。