Javascript needed to keep active page link highlighted - html5 & css

StackOverflow https://stackoverflow.com/questions/23438021

  •  14-07-2023
  •  | 
  •  

Question

I have read and tried numerous version of javascript and I can not seem to get my active page link to stay highlighted. Please help. Java script is not my thing. Doc type is HTML5

Below is CSS

nav a:link   {
    color: #FFFDEF;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}
nav a:visited   {
    color: #FFFDEF;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}
nav a:hover   {
    color: #F38000;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #101010;
}
nav a:active  {
    color: #F38000;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #101010;
}

Below is HTML

<nav>
    <div id="mainmenu">
        <a href="../index.html">HOME</a>
        <a href="../beefmaster-breedinfo.html">BREED INFO</a>
        <a href="../aboutwo.html">ABOUT</a>
        <a href="../awards.html">AWARDS</a>
        <a href="../news.html">NEWS</a>
        <a href="../farmandcattlereferencelinks.html">LINKS</a>
        <a href="../blackbeefmastergeneticshowtoeffectivelybreedthem.html">TIPS</a>
    </div>
</nav>
Was it helpful?

Solution

:active only applies while the link is being activated (while the mouse button is being pressed). It is probably working in that regard. Perhaps you are looking for a way to identify which link matches the current page and apply some styling?

<body>
...
<script>
  Array.prototype.forEach.call(
     document.querySelectorAll("#mainmenu a[href]"), 
     function(t) { 
        var hr = t.href.split("/").pop();
        if (window.location.href.indexOf(hr) > -1)
            t.className = 'active';
        else
            t.className = '';
     }
  );
</script>
</body>

And a CSS class like:

nav a.active,
nav a:active  {
  color: #F38000;
  background-color: #101010;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top