CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dansghc
Dansghc

Reputation: 31

Highlight current page with CSS and Javascript

I've managed to get it so when I click on say "about" then it adds the class that I've called "active" however it doesn't remove the previous "active" on the home page link

Here is my HTML

<nav id="main-nav" role="navigation">
    <ul>
        <li>
            <a href="/" data-description="Welcome">Home</a>
        </li>
        <li>
            <a href="/about" data-description="Learn more">About</a>
        </li>
    <ul>
</nav>

and here is my javascript 

function setActive() {
  aObj = document.getElementById('main-nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
window.onload = setActive;

Basically what I want to be able to do is the following:

When on homepage it adds the class "active" so that I can highlight the link with CSS.

Then when I click on About it removes the "active" class from home (thus removing the highlighted css) and adds the "active" class to about (thus adding the highlighted css).

Upvotes: 3

Views: 671

Answers (2)

Vini
Vini

Reputation: 8419

I checked the source of your page and I think the problem lies in the way the links are created (the JavaScript code you have posted is okay).

PROBLEM : The URL of the "Home" tab is 

https://dhctranslations.com/

And the other URLs (hrefs) on the navigation are

About Tab                 - https://dhctranslations.com/about
Certified Translation Tab - https://dhctranslations.com/certified-translation-services
Pricing Tab               - https://dhctranslations.com/pricing
...
...

The check you are doing in your function is 'indexOf' check. That is why the condition always returns true for the 'Home' tab (as this part of the URL is common to all other links).

SUGGESTION : To remedy this you can either change the 'indexOf' check and replace it with equality check in your code OR change the URL of the 'Home' tab to something like 

https://dhctranslations.com/home

Please note that these are just my suggestions and I am pretty sure that you can work out a solution that suits better to your application's design/architecture.

UPDATE : Here is the modified code that works (Please note this is just to give you an idea and is not a clean solution at all)

  aObj = document.getElementById('main-nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    aObj[i].className = "";

    // Changed the condition 
    // Concatenated the "/" for comparison as the array does not have trailing "/"s stored
    if(document.location.href === aObj[i].href+"/") {
      aObj[i].className='active';
    }
  }

Upvotes: 1

Miguel M.
Miguel M.

Reputation: 421

Just add aObj[i].className = ""; before the if condition.

function setActive() {
      aObj = document.getElementById('main-nav').getElementsByTagName('a');
      for(i=0;i<aObj.length;i++) {
        aObj[i].className = "";
        if(document.location.href.indexOf(aObj[i].href)>=0) {
          aObj[i].className='active';
        }
      }
    }
window.onload = setActive;

What this is basically doing is removing every class from all the links and only adding the 'active' class if it's the correct page. But since it seems the page is refreshing, I don't know how the class would persist from one page to the other, so it would be helpful to have a link to the code.

Upvotes: 1

Related Questions