css - jQuery set active/hover background images -

I have a list containing 5 items, first one is active (on load) (with active class' by JQuery Added). They have background images with everyone. If I click any other update of LiY with relevant content (this is working)

Although I am struggling with the following:

If you take , Click on its background image to update the color (color '' -cl.png '' suffix). When I knock on someone else, update the background image as a color and also keep one clicked (with the 'active' category square) if the background image is black and white (' -bw.png 'suffix) is not set, but keep active color.

Hope I have explained myself clearly how can I achieve this but no thoughts? Thanks, Brett

Here's my HTML:

  & lt; Ul class = "graduate_tab" & gt; & Lt; Li class = "graduation 1" & gt; & Lt; A href = "# grad1" & gt; & Lt; Span class = "gradimg1" & gt; Grade 1 & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "bachelor 2" & gt; & Lt; A href = "# grad2" & gt; & Lt; Span class = "gradimg2" & gt; Grad2 & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "graduation 3" & gt; & Lt; A href = "# grad3" & gt; & Lt; Span class = "Gradimg 3" & gt; Grade 3 & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "bachelor 4" & gt; & Lt; A href = "# grad4" & gt; & Lt; Span class = "Gradim 4" & gt; Grade 4 & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "bachelor 5" & gt; & Lt; A href = "# grad5" & gt; & Lt; Span class = "gradimg5" & gt; Grade 5 & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

First of all, I work in mostly CSS , Like this:

 . Graduation 1 {Background: URL (Image 1-BW.) Graduate 1. Active, Graduation 1: Hover {Background: url (image1-cl.png);} Graduation 2 {Background: URL (image2-bw.png );} Graduation 2. Active. Graduation 2: Hover {Background: url (image2-cl.png);} // etc ...  

Then you all of it There is a need to worry about active class, like this:

  $ (click 'graduation_tab') (function () {$ (this). AddClass ('active'). Sister (). RemoveClass ('Active');});  

Using the one clicked and the rest will be moved into a click on the active class ... if you want to be able to remove it from someone already active Toggle) You can replace it for that behavior.