Add class active when clicking menu link with JAVASCRIPT

Question

HTML

<div id="top" class="shadow">
  <ul class="gprc"> 
   <li><a href="http://www.domain.com/">Home</a></li> 
   <li><a href="http://www.domain.com/link1/">Text1</a></li> 
   <li><a href="http://www.domain.com/link2/">Text2</a></li> 
   <li><a href="http://www.domain.com/link3/">Text3</a></li> 
   <li><a href="http://www.domain.com/link4">Text4</a></li> 
 </ul>

Javascript

window.onload = setActive;
function setActive() {
    aObj = document.getElementById('top').getElementsByTagName('a');
    var found = false;
    for (i = 0; i < aObj.length; i++) {
        if (document.location.href.indexOf(aObj[i].href) >= 0) {
            aObj[i].className = 'active';
            found = true;
        }
    }
    if (!found) {
        aObj[0].className = 'active';
    }
}

The problem is that the menu home link remains selected or active all the time even if i click on other links and I would like to make it not selected on loading of the page and also to remain non-selected while other link that i clicked and i am on the specific landing page remains selected. Please only Javascript no JQUERY.

Indeed, indexOf searched a string for another string, and the first hrefs is present in all the other href, so when visiting any of those adresses the first href will always match. — adeneo
– adeneo, Commented Oct 28, 2013 at 20:42

ccsakuweb · Accepted Answer · 2013-10-28 21:07:51Z

1

Try this:

window.onload = setActive;
function setActive() {
    var aObj = document.getElementById('top').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 you never want home selected remove the next
    if(!found && document.location.href.replace(/\/$/, "") == aObj[0].href.replace(/\/$/, ""))
         aObj[0].className = 'active';
}

With this way you start at the end of the list, and when you find a coincidence it stop the search of an active link.

I hope it helps you

edited Oct 28, 2013 at 21:07

answered Oct 28, 2013 at 20:45

ccsakuweb

7895 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adrian Over a year ago

Works well, but one thing that i requested, the home link i would like it non active in anyway, like when the page loads.

megawac Over a year ago

That doesnt fix his code - from what I see all you've done is a slight optimization and removed the global variable i. Note aObj is still global.

ccsakuweb Over a year ago

@Adrian ok I changed it and the code never evaluates the home link. Only will have active class name the other links. Now I evaluate if the link was not found after the for, and if it is exactly the home link.

Adrian Over a year ago

@ccsakuweb Exactly what i wanted.

ccsakuweb Over a year ago

@Adrian I have made a little modification. If you want to select home link, the problem with == is that maybe the link has slash at the end and the url does not. So you can remove the last slash if exist doing: .replace(/\/$/, ""). I'm happy I could help you ^^

ccsakuweb · Accepted Answer · 2013-10-28 21:26:09Z

function setActive() {
    var top = document.getElementById('top'),
        aObj = top.getElementsByTagName('a'),
        href = document.location.href,
        found = false;

    for (var i = 0; i < aObj.length || !found; i++) {
        if (href.indexOf(aObj[i].href) >= 0) {
            aObj[i].className = 'active';
            found = true;
        }
    }
    if (!found) {
        aObj[0].className = 'active';
    }

    //Listen for link clicks
    function listener(e) {
        if(e.target.tagName === "A") {
            for (var i = 0; i<aObj.length; i++) {//remove previous class
                aObj[i].className = "";
            }
            e.target.className = "active";
        }
    }
    if(top.addEventListener) {
        top.addEventListener(listener);
    } else if(top.attachEvent) {
        top.attachEvent(listener);
    }
}

You're going to need to listen to the click event so you can determine if one of your links is pressed. I'm going to do this using some simple delegation

Collectives™ on Stack Overflow

Add class active when clicking menu link with JAVASCRIPT

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related