Question

I have the default link color active when you enter the site but I can’t seem to get it to remove off active when mouse clicks on another link and the new current page is now active. here is my code.

JS

$("a").on("click", function() { 
    $(".active").removeClass("active"); 
});

CSS

.active{ 
    color: #ffff00 
    !important; 
}

a { 
    text-decoration: none; 
    z-index: 5; 
    font-family: arial, "Trebuchet MS"; 
    cursor: pointer; 
    color: #2777A3; 
}

HTML

<a href="http://www.pro.com/" target="_self" class="active">Home</a>`

Answer 1

If you just have HTML, CSS, and JQuery, you just need to set the active class on the right link on each page. You don’t need to remove classes with JQuery.

What seems to be happening is that when a user clicks on a link, the page reloads, which resets the CSS and puts the active class on the Home link again. Every time the user clicks, the page will refresh and reset the class.

So, JQuery will effectively remove the class, but then clicking on the link will send the browser to the new page and reset the CSS.

Example:

Home

<a href="http://www.pro.com/" target="_self" class="active">Home</a>
<a href="http://www.pro.com/products" target="_self">Products</a>
<a href="http://www.pro.com/solutions" target="_self">Solutions</a>

Other Page 1

<a href="http://www.pro.com/" target="_self">Home</a>
<a href="http://www.pro.com/products" target="_self" class="active">Products</a>
<a href="http://www.pro.com/solutions" target="_self">Solutions</a>

Other Page 2

<a href="http://www.pro.com/" target="_self">Home</a>
<a href="http://www.pro.com/products" target="_self">Products</a>
<a href="http://www.pro.com/solutions" target="_self" class="active">Solutions</a>