Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 17/02/2013, 06:58

Analizá este ejemplo, se aplica a otra cosa pero el principio es el mismo

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>
<title>reemplazar imagen</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* estilos por defecto */
#Uno,#Dos,#Tres{
border: none;
background: cyan;
cursor: pointer;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function reemplazar(cual){
var capas = new Array("Uno", "Dos", "Tres");
var i;
    for(i in capas){
        var e = document.getElementById(capas[i]);
        capas[i] == cual?e.style.border='solid 2px red':e.style.border='none';
        capas[i] == cual?e.style.background='lime':e.style.background='cyan';
        // agregar más propiedades a modificar
    }
}
//]]>
</script>
</head>
<body>
<p>
<button id="Uno" onclick="reemplazar('Uno')">1</button>
<button id="Dos" onclick="reemplazar('Dos')">2</button>
<button id="Tres" onclick="reemplazar('Tres')">3</button>
</p>
</body>
</html>

Esto se puede, si se justifica, simplificar utilizando jQuery, ya que posee los métodos addClass() y removeClass(), incluso podrías usar alguna función auxiliar con js puro que realice el intercambio de clases

SAludos