Highlight current page with CSS and Javascript

Question

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).

is jquery a valid option? it's in the tags, but since you're using pure javascript... — monxas, Jun 02 '15 at 15:32
http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Seth T, Jun 02 '15 at 15:33
Hey Dansghc, request you to accept the answer if it worked for you. — Vini, Jun 21 '15 at 19:02

score 1 · Answer 1 · answered Jun 02 '15 at 15:35

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.

I think an else tag would be a bit more preferable,to avoid setting classes twice. — Blue, Jun 02 '15 at 15:37
Tried adding your code but still having the same problem, I'll keep trying to remove the "active" class from the homepage link — Dansghc, Jun 02 '15 at 18:26

Vini · Answer 2 · 2015-06-02T20:32:48.363

1

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';
    }
  }

edited Jun 02 '15 at 20:32

answered Jun 02 '15 at 20:10

Vini

8,299
11
37
49

Thanks a lot Vini, it works for the most part however if you then click on Contact or Home the active class doesn't get added (Also not working on the Italian version of the site) I really appreciate the help you've given so far, I'm quite new to JS. It's not a huge problem however I'll need to spend a lot more time reading and getting used to it! :) – Dansghc Jun 02 '15 at 20:48
So far I've got this `window.onload = setActive; function setActive() { var aObj = document.getElementById('main-nav').getElementsByTagName('a'); var found = false; for(var i=aObj.length-1; i>=1 && !found; i--) { if(document.location.href.indexOf(aObj[i].href)>=0) { aObj[i].className='active'; found = true; } } if(!found && document.location.href.replace(/\/$/, "") == aObj[0].href.replace(/\/$/, "")) aObj[0].className = 'active'; } ` This is has got the Home active class working again but no such luck for the Contact page – Dansghc Jun 02 '15 at 21:09
1

Not working for 'Home' page as the link assigned does not have a trailing '/' The reason of this not working on italian pages is that the page is assigning a class 'current' to the '
' elements. I see that you have got the idea and as you correctly mentioned - just sit and take a look at the code (specially how the values are getting assigned/stored and the checks you have in place in your JS code). That should take care of all these issues. Challenges like this are what make learning any new language fun. Good Luck and happy learning !!

Vini

Jun 02 '15 at 21:52

Perfect! Everything is working now as it should be. There was an error in the JS file (related to Google Maps) that was apparently causing the issue for whatever reason. Also good spot on the 'current' to the

elements, that was just a complete slip from myself when working on the italian header. Thanks a lot for your time and help!

– Dansghc Jun 02 '15 at 22:03

Highlight current page with CSS and Javascript

2 Answers2