Why will the colour of the active link not highlight blue?

Question

I am trying to make a navbar so that when you are on the page lets say "Home" - the link of "home" on the navbar highlights blue therefore when you are on a different page it is no longer blue. I am doing this in a ruby on rails app so I need to use javascript in order for this to happen. Below is the HTML for the navbar as well as the javascript that I am trying to use.

Navbar HTML

<div class="navbar-box d-flex">
  <div class="logo-box"></div>
  <div class="links d-flex justify-content-around align-items-center">
    <a><%= link_to "HOME", root_path %></a>
    <a><%= link_to "ABOUT US", about_path %></a>
    <a><%= link_to "APARTMENTS", index_path %></a>
    <a><%= link_to "CONTACT US", new_contact_path %></a>
  </div>
</div>

Javascript

const currentLocation = window.location.href
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length;
for(let i = 0; i < menuLength; i++){
  if(menuItem[i].href === currentLocation){
    menuItem[i].className = "active"
  }
}

CSS

.active{
  color: #7587bf

}

Try calling `console.log(currentLocation)` and `console.log(menuItem[i].href)` and see how they differ. — Barmar, Jul 14 '20 at 08:02
I don't use Ruby on Rails, but I just searched for some examples, and it doesn't seem like `link_to` should be nested inside ``. It expands to `` by itself. — Barmar, Jul 14 '20 at 08:06
I'm sorry question was closed, it's not a duplicate of the question cited. There are other ways to implement what the OP has asked, besides pulling the href attribute from the tag. For example it's possible to do this in Rails, without any javascript. But since the question has been closed, I cannot offer this suggestion! — Les Nightingill, Jul 14 '20 at 16:07

Why will the colour of the active link not highlight blue?

0 Answers0