Question

I want the default “CSS class”to be black, and when using this select function for “selected” to have white text. I don’t know where I’m going wrong

$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('selected');
       $(this).addClass('selected');
       $(this).css('color', 'white');
       $(this).addClass('result-holder');
       $(this).css('color', 'black');


   });
});

Image demonstrating the problem:

http://imgur.com/AquDa

Answer 1

Here is your existing code with an explanation of what it does any time any anchor tag with the class “link” is clicked:

$('a.link').removeClass('selected');   // remove 'selected' from all links
$(this).addClass('selected');          // add 'selected' to clicked link
$(this).css('color', 'white');         // turn clicked link 'white'
$(this).addClass('result-holder');     // add 'result-holder' to clicked link
$(this).css('color', 'black');         // turn clicked link 'black'

You are turning the clicked link white and then turning it back to black all in the same block of code so you’ll never see it displayed as white.

I’m pretty sure what you really want to do is as follows:

$('a.link').removeClass('selected')    // remove 'selected' from all links
           .css('color', 'black');     // and make them black again

$(this).addClass('selected')           // add 'selected' to clicked link
       .css('color', 'white').         // and turn it 'white'

(Note if calling more than one function on a jQuery object you can “chain” them, like $(this).addClass('selected').css('color','white');)

I can’t really tell what you want to do with the ‘result-holder’ class, because your current code adds it to the clicked link but doesn’t remove it from anything. If you want to add it to the clicked link say $(this).addClass('result-holder') like you already do.

Note that you can simplify this by just adding color:white; to your ‘selected’ class definition, and setting color:black; in your default a.link styling:

a.link {
   color : black;
}    

a.selected {
   /* your existing style settings here, then: */
   color : white;
}

Here’s a demo: http://jsfiddle.net/nnnnnn/6qURY/