cambiar color letra al hacer clic

esebayolo · #1 (**permalink**) 19/03/2012, 12:29

Hola, estoy intentando que un enlace se quede de un color cuando es pulsado y los otros enlaces de otro color distinto. Con este evento lo he conseguido:

Código:

...
function letraGris(id) {
	div = document.getElementById(id);
	div.style.color="#82807B";
}
function letraVerde(id) {
	div = document.getElementById(id);
	div.style.color="#090";
}
...
...
...onClick="letraVerde('menu1');letraGris('menu2');letraGris('menu3');"..

El problema es que no puedo darle un color inicial a la letra ya que si lo hago este código no funciona...Por ejemplo en el CSS hago:

Código:

#menu h1 {
	font-size: 13px;
	color:#82807B;
}

Y así si tengo el color inicial que quiero...pero no me funciona lo anterior...en cambio si elimino la linea del color si me funciona...hay alguna otra forma de darle color inicial?

Gracias y un saludo.

emprear · #2 (**permalink**) 19/03/2012, 13:18

El tema pasa por saber si esos enlaces forman parte de un menu en comun a varias páginas o no. Si son varias páginas lo harías solo con css.
Tambien puede darse el caso de que dichos links carguen algun contenido con ajax, sin salir nunca de la página inicial, ahi tiene más sentido,

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<style type="text/css">
/*<![CDATA[*/
 
a{
color: red;
}
a#cancion_uno{
color:green;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
/* ---------------------------- */
/* Cambiar propiedad    Multiples       */
/* ---------------------------- */
 
function m_oCapas() { 
  var i,a,v,elemento,cond=m_oCapas.arguments;
  for (i=0; i<(cond.length-2); i+=3) 
  with (document) if (getElementById && ((elemento=getElementById(cond[i]))!=null)) { v=cond[i+2];
    if (elemento.style) { elemento=elemento.style; v=(v=='rojo')?'red':(v=='verde')?'green':v; }
    elemento.color=v; }
}
 
//]]>
</script>
 
</head>
 
<body>
<div>
<a href="#" id="cancion_uno" onclick="m_oCapas('cancion_uno','','verde','cancion_dos','','rojo','cancion_tres','','rojo','cancion_cuatro','','rojo')">
Unicornio (S. Rodriguez)</a><br />
 
<a href="#" id="cancion_dos" onclick="m_oCapas('cancion_uno','','rojo','cancion_dos','','verde','cancion_tres','','rojo','cancion_cuatro','','rojo')">
Mariana (S. Rodriguez)</a><br />
 
<a href="#" id="cancion_tres" onclick="m_oCapas('cancion_uno','','rojo','cancion_dos','','rojo','cancion_tres','','verde','cancion_cuatro','','rojo')">
Verbos en juego (S. Rodriguez)</a><br />
 
<a href="#" id="cancion_cuatro"  onclick="m_oCapas('cancion_cuatro','','verde','cancion_dos','','rojo','cancion_tres','','rojo','cancion_cuatro','','verde')">
Mujer con sombrero (S. Rodriguez)</a><br />
 
</div>
 
</body>
</html>

ejecutá ese código y se va a entender.
saludos

IsaBelM · #3 (**permalink**) 19/03/2012, 14:44

este post te aclarará que es lo que está pasando

esebayolo · #4 (**permalink**) 20/03/2012, 04:52

gracias a los dos por responder!

usando getComputedStyle se solucionó!