checking the current url and then marking a link active based on that url

checking the current url and then marking a link active based on that url Demo

View Demo Full Screen View Demo New Tab

checking the current url and then marking a link active based on that url Code

HTML

<div class='test-nav'>
<ul class="test-nav-ul" id="test-nav-ul">
<li class="testnavlink"><a href="https://kruxor.com/view/content/MrXNv/kruxor-moving-from-bootstrap-to-css-grid/">Link One</a></li>
<li class="testnavlink"><a href="https://kruxor.com/view/code/lWhoL/badge-border-colour-is-too-dark-or-light-on-number-badges-fixed/">Link Two</a></li>
<li class="testnavlink"><a href="https://kruxor.com/view/code/L8XP1/">Link Three (alternate link for this page)</a></li>
<li class="testnavlink"><a href="https://kruxor.com/view/code/L8XP1/checking-the-current-url-and-then-marking-a-link-active-based-on-that-url/">checking the current url and then marking a link active based on that url</a></li>
<li class="testnavlink"><a href="https://kruxor.com/view/code/WSQr2/using-gzdeflate-on-a-string-php/">Link Four</a></li>
</ul>
</div>

CSS

.testnavlink .active {
  font-weight:bold;
  color:#F00;
}

Javascript

window.onload = function() { 
    var all_links = document.getElementById("test-nav-ul").getElementsByTagName("a"),
        i=0, len=all_links.length,
        full_path = location.href.split('#')[0]; //Ignore hashes?

    // Loop through each link.
    for(; i<len; i++) {
        if(all_links[i].href.split("#")[0] == full_path) {
            all_links[i].className += " active";
        }
    }
}