Modificar estilo con javascript

[annamon]

Hola compañeros!

Soy nuevo por aquí y tengo conocimientos escasos de Javascript pero necesito la ayuda de este lenguaje para conseguir lo que me propongo.

Tengo un menú simple en vertical que al pasar por encima me cambia el estilo con el :hover. Lo que me gustaría hacer es que al clicar se me mantuviera el mismo estilo que utilizo con el :hover y cuando clicara en otro, el primero se me desactivara y me activara el que acabo de clicar encima.

Alguien me puede ayudar u orientar, por favor?

[franciscoooooouu]

Si usas jQuery supongo que se puede hacer así:

Código HTML:

<ul>
 <li>Primero</li>
 <li>Segundo</li>
 <li>Tercero</li>
</ul>
 

Código Javascript:

$(li).click(function () {
  $(".hover").removeClass("hover");
  $(this).addClass("hover");
});
 

No sé si funciona porque no lo he probado. Ya me dices.

[soyuncreeper]

Iniciado por franciscoooooouu

Si usas jQuery supongo que se puede hacer así:

Código HTML:

<ul>
 <li>Primero</li>
 <li>Segundo</li>
 <li>Tercero</li>
</ul>
 

Código Javascript:

$(li).click(function () {
  $(".hover").removeClass("hover");
  $(this).addClass("hover");
});
 

No sé si funciona porque no lo he probado. Ya me dices.

Creo que el selector del LI sería con

Código Javascript:

$("li").click
 

[annamon]

Muchas gracias a los dos por contestar.

En principio no me ha funcionado no sé si hago algo mal. La cuestión es que de Javascript sé poquillo y de JQuery nada y no lo entiendo muy bien.

Os pongo el código HTML I CSS que tengo a ver si os ocurre alguna solución?

Os lo agradeceré mucho
HTML

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


CSS

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

[soyuncreeper]

¿No deberían ir los <a href> dentro de los <li>? De todas formas, creo que debería funcionar así ¿no?

[annamon]

lo he probado de las dos maneras y no me funciona.

También he pensado que a mi lo que me interesa es que tenga el estilo que os he pasado. Me refiero que lo que me has comentado no seleccionas todos los li?

Muchas gracias por contestar

[annamon]

La parte javascript supongo que la pongo en un archivo aparte y lo añado en el head verdad?

[soyuncreeper]

El script jQuery lo que hace es seleccionar todos los LI y darles un eventListener, es decir, que cada vez que ocurra un evento (en este caso un click) se ejecute la función.

Quizá con

Código Javascript:

$("li").click(function () {
    $("li .hover").removeClass("hover");
    $(this).addClass("hover");
});
 

[soyuncreeper]

Justo, el JavaScript en un archivo a parte y en el HEAD después del archivo del jQuery.

[annamon]

Iniciado por soyuncreeper

El script jQuery lo que hace es seleccionar todos los LI y darles un eventListener, es decir, que cada vez que ocurra un evento (en este caso un click) se ejecute la función.

Quizá con

Código Javascript:

$("li").click(function () {
    $("li .hover").removeClass("hover");
    $(this).addClass("hover");
});
 

Ok, pero no se tendría que ser más específico? en la hoja de estilos tengo diferentes hover

[annamon]

Iniciado por soyuncreeper

Justo, el JavaScript en un archivo a parte y en el HEAD después del archivo del jQuery.

Gracias,

se pone tal cual fuera un javascript no?:



<head>
<script type="text/javascript" src="javascript.js"></script>
</head>

[soyuncreeper]

Código Javascript:

$(".submenu_links li").click(function () {
  $(".submenu_links li .hover").removeClass("hover");
  $(this).addClass("hover");
});
 

[soyuncreeper]

Si puedes abrir la consola del navegador y ver si da algún error, mejor.

[annamon]

Creo que ya sé q pasa.

En el documento tengo que escribir esto?

<head>
<script src="jquery-v1.8.1.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>


Y se supone que me tengo que descargar primero el archivo de jquery, no?

[soyuncreeper]

El código está bien así, pero debes tener ese jquery-v1.8.1.js en el servidor, por supuesto.

De todas formas, mira a ver si te sale algún error en consola.

[annamon]

No hay ningún error en la consola.

No sé por donde tirar...

Muchas gracias igualmente por todas las respuestas

[soyuncreeper]

Igual funciona así...

Código Javascript:

$(document).ready(function(){
  $(".submenu_links li").click(function () {
    $(".submenu_links li .hover").removeClass("hover");
    $(this).addClass("hover");
  });
});
 

[annamon]

Sigue sin funcionar pero no acabo de entender muy bien la función:

Cuando le dices removeClass("hover") no tendría que decírselo a todo el selector que uso en CSS:
removeClass(".submenu_links li:hover") ?

Igual para el addClass

[soyuncreeper]

No, a removeClass se pasa la clase a borrar como String.

Por ejemplo, si quieres quitar la clase fool a un <div id="mydiv"></div> usas:

Código Javascript:

$(document).ready(function(){
  $("#mydiv").removeClass("fool");
});
 

[annamon]

Iniciado por soyuncreeper

No, a removeClass se pasa la clase a borrar como String.

Por ejemplo, si quieres quitar la clase fool a un <div id="mydiv"></div> usas:

Código Javascript:

$(document).ready(function(){
  $("#mydiv").removeClass("fool");
});
 

Pero hover es un pseudoselector no una clase, no lo acabo de entender

[soyuncreeper]

Aquí estamos usando hover como clase, por lo que en tu css tendrás que crear una clase llamada así, que creo que es lo que ha estado fallando todo el rato.

Código CSS:

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

[soyuncreeper]

O mejor aún:

Código CSS:

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

[annamon]

Ueeeeee!!

Empieza a funcionar pero me da este error: ReferenceError: $ is not defined
[Parar en este error]

$(document).ready(function(){

[annamon]

Muchas gracias por todo mañana sigo más que llevo todo el día dándole a esto y me voy a la cama que aquí en España son las 00.30

Muchísimas gracias!

[soyuncreeper]

Yo también soy de España xD

Si $ is not defined es porque hay algo mal al importar el jQuery, seguramente.

[annamon]

Último escrito jejeje: me lo he bajado de la pagina de esta pagina http://jquery.com/, la versión de desarrollo pero no me ha descargado nada me salido una nueva ventana con todo el código escrito. Lo he copiado, lo he pegado y lo he guardado con el mismo nombre que tiene y lo tengo guardado en la misma carpeta donde tengo todos los documentos ya que de momento sólo trabajo en local.

Adiós!!!

Y muchísimas gracias!!!!

[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?

[soyuncreeper]

No sé, prueba esto.

Código Javascript:

$(document).ready(function() {
  $(".submenu_links li a").click(function () {
    $(".submenu_links li a").removeClass("hover");
    $(this).addClass("hover");
  });
});
 

[annamon]

Eureka!!!!!!!

Muchísimas gracias funciona!!!!

[soyuncreeper]

Menos mal, empezaba a quedarme sin ideas xD