Modificar estilo con javascript

[annamon]

Bueno, de momento empieza a funcionar. El código que hace que al menos haga algo es el siguiente:

Código:

javascript
<style type=$(document).ready(function()
{
  $(".submenu_links li a").click(function ()
  {
    $(".submenu_links li a .hover").removeClass("hover");
    $(this).addClass("hover");
  });
});

Código:

HTML
<ul class="submenu_links">
	<li><a style='cursor: pointer;' value="PrimerCicle" onClick="PrimerCicle();">Primer Cicle d’Educació Infantil (0/3 anys)</a></li>
	<li><a style='cursor: pointer;' value="Assesorament" onClick="Assesorament();">Assessorament Pedagògic</a></li>
	<li><a style='cursor: pointer;' value="ServeiMenjador" onClick="ServeiMenjador();">Servei de Menjador amb cuina casolana</a></li>
	<li><a style='cursor: pointer;' value="BonoEscolar" onClick="BonoEscolar();">Bono escolar</a></li>
	<li><a style='cursor: pointer;' value="EspaisFamiliars" onClick="EspaisFamiliars();">Espais familiars per infants matriculats</a></li>
	<li><a style='cursor: pointer;' value="AlletamentMatern" onClick="AlletamentMatern();">Programa d’alletament matern</a></li>
	<li><a style='cursor: pointer;' value="TallerMassatges" onClick="TallerMassatges();">Tallers de massatges</a></li>
	<li><a style='cursor: pointer;' value="EscolaEstiu" onClick="EscolaEstiu();">Escola d’estiu</a></li>
</ul>

Código:

CSS
.submenu_links li a:hover, .submenu_links li a:active, .hover {
font-weight: bold;
background: url("flechita_links.gif")  right no-repeat;
color: #15A567;
padding-right: 15px;
}

Lo que hace es que cuando clicas encima se queda sólo la imagen de la flechita de fondo, no se queda en bold y además cuando clicas encima de otro "li", el anterior no se desactiva

Alguna idea?