JavaScript Highlight current page problem

[paganJim]

Hi all,

I am having a problem that is confusing the hell out of me... I have a small script that highlights the active page. That works. Sort of... The problem is I have three links, out of eight that absolutely refuse to highlight. I have checked everything I can, have found and tried several scripts for this purpose and all of them refuse to highlight the same entries in my nav bar. It looks like I have done everything the same way. This is driving me absolutely batty.

Here is the js.

<script>
const menuitems = document.querySelectorAll("a");

for (let i=0; i < menuitems.length; i++) {
  menuitems[i].addEventListener("click", (e) => {
    for (let i=0; i < menuitems.length; i++) {
      menuitems[i].classList.remove("current");
    }
    e.target.classList.add("current");
    e.preventDefault();
  });
}
</script>

And for reference here is my nav bar.

<ul id="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="runelist.php">Rune List</a></li>
      <li><a href="alpha.php">Runic Alphabet</a></li>
      <li><a href="trans.php">Runic Transliteration</a></li>
      <li><a href="aetts.php">The Aetts</a></li>
      <li><a href="runes.php">Runes</a></li>
          <ul>
          <li>Freya's Aett</li>
          </ul>
      <li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a></li>
  </ul>

There are more entries in the sub UL where it says "Freya's Aett" under Runes but I thought just the one sub would suffice for illustration purposes. But, that is one I am having a problem getting the highlighting on. Along with the second entry, Rune List, and the seventh entry about.

Any insight greatly appreciated. As I said before I have tried several scripts, but NONE of them will highlight the same ones so I am completely at a loss.

Thanks for reading!
Jim

 

[OldMan]

This:
<ul>
<li>Freya's Aett</li>
</ul>
does not belong in the list. I removed it. It probably isn't coded right for what you want. I set "current" to a color and it worked for every element. What didn't work was removing the highlight when a different item was chosen.

All of this is mote since the page would immediately change to the page clicked on and the highlight goes dark.
If you wanted the page you are on to be highlighted you don't need JS.
If you wanted to show which item your mouse is over or which item the TAB key moved to, you can't use an onClick listener.

Please be more specific.

 

[Ash]

@paganJim, I can't help much with the JavaScript but for the nested list, I believe you need to have it nested inside the parent <li> element. So like this

<li><a href="aetts.php">The Aetts</a></li>
<li><a href="runes.php">Runes</a>
    <ul>
        <li>Freya's Aett</li>
    </ul>
</li>
<li><a href="about.php">About</a></li>

Is that what you mean by "it does not belong in the list" @OldMan ?

 

[paganJim]

@OldMan
As I stated in my code above, the UL that you refer to is only there to illustrate my menu structure. There are a couple dozen more entries in that sub than I show. I didn't think I needed to show all 25 of them. In fact is states in the rules to NOT post extraneous code. So I was trying to just illustrate the structure. And I am sorry if the statement I made, " I have a small script that highlights the active page. That works. Sort of... The problem is I have three links, out of eight that absolutely refuse to highlight. " was not clear enough in my description of my problem.

@Ash I have tried it both ways. I have tried to recode each of those entries more times than I can remember. But I still wind up with the same problems. All of the navbar entries highlight as expected with the exception of the three that I mentioned. I changed it back to the way you mentioned just for giggles and still the same problem persists.

I can post my whole page code is someone thinks it may help them solve the problem.

That is what is driving me so damn crazy with this problem.

But anyway, thanks for reading and responding!
Jim

 

[Ash]

@paganJim Just noticed that the sub-menu list items like "Freya's Aett" aren't links. Could that be the cause of it? Might be worth making Freya's Aett a link and seeing if that fixes it.

 

[base640]

Works fine for me. Have you verified from the developer tools, that the "current" class does not appear to the 2nd & 7th links?.

 

[paganJim]

The current class only shows on the current page. That is what highlights the page in the navbar.

 

[base640]

Can you provide the CSS code that does the highlighting? There might be some kind of specificity problem ("li > a:visited" is more specific than ".current", and takes the precedence).