Question

I have 4 links that change the position of 4 divs inside a web page. I am using the following jQuery script to change the color of the links when I hover them.

    $('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
},
function(){
    $(this).css({'color':'white'});
});

how can i modify this script so that when i click a link it keeps the color from hover and not change when i take my mouse off of it?

$('a.menua').click(function(){
     //content
});

Answer 1

I would use CSS for all of the styling, like this:

a.menua { color: white; }
a.menua:hover, a.menua.clicked { color: #2EC7C7; }

Then only use jQuery just toggle that class using .toggleClass() like this:

$('a.menua').click(function(){
   $(this).toggleClass('clicked');
});

Or, if you want only one active at a time:

$('a.menua').click(function(){
   $('a.menua').removeClass('clicked');
   $(this).addClass('clicked');
});

This makes your code simpler, lighter, and easier to maintain. Also it keeps your styling information where (if at all possible) it belongs, in the CSS.