Question

My website has a navigation bar that when clicked targets an iframe.
i would like the “active” link color to be changed.

P.S can’t use jQuery, only JS and CSS.

my idea was to have an ID named ACTIVE and give the clicked link the ID active, after removing the ID from all the rest.

• though i have no idea how its possible to do so.

on the other hand another option is to do the same only using a class called ACTIVE, my problem there is each link has allready a class assigned to id, and i have no idea how to remove one class out of two.

Answer 1

This is a problem best solved using classes. If you can’t use jQuery, you can add classes in JavaScript via something like:

document.getElementById("someID").className += " newClass";

Remove a class using regex:

document.getElementById("someID").className = document.getElementById("someID").className.replace(/\bnewClass\b/,'');

If it doesn’t make sense to give each link an ID, you can attach a click handler:

onclick="changeColor(this)"

And add the subsequent function:

var activeLink;

function changeColor(elem){
    if(activeLink)
        activeLink.className = activeLink.className.replace(/\bnewClass\b/,'');
    elem.className += " newClass";
    activeLink = elem;
}