Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Estados relacionados de botones

Estas en el tema de Estados relacionados de botones en el foro de Javascript en Foros del Web. Hola, tengo una duda. Tengo que hacer 3 botones con dos css, uno para el estado activado y otro para desactivado. Cuando piche en uno, ...
  #1 (permalink)  
Antiguo 17/02/2013, 05:29
 
Fecha de Ingreso: mayo-2012
Mensajes: 25
Antigüedad: 11 años, 10 meses
Puntos: 1
Estados relacionados de botones

Hola, tengo una duda.

Tengo que hacer 3 botones con dos css, uno para el estado activado y otro para desactivado. Cuando piche en uno, los otros dos tienen que cambiar su estado actual(y estilo css) a desactivado.
Tengo esto:

Código:
<script type="text/javascript">

            function cambiarEstado(btn)
            {
                var padre = document.getElementById("botonera");
                for(i=0;ele=padre.document.getElementByTagName("button")[i];i++){
                    ele.disabled = ele == btn;
                    if(ele.disabled == true){
                        ele.className = 'estilo_cambia';
                    }else{
                        ele.className = 'estilo';
                    }
                }
            }

        </script>
        <style>
            .estilo{
            background-color: #CCCCCC;
            width:100px;
            height:20px;
            margin-bottom:10px;
            }
            .estilo_cambia{
            background-color: #0489B1;
            width:100px;
            height:20px;
            margin-bottom:10px;
            }
        </style>
    </head>
    <body>
        <div id="botonera">
            <button class="estilo" onClick="cambiarEstado(this)">boton1</button>
            <button class="estilo" onClick="cambiarEstado(this)">boton2</button>
            <button class="estilo" onClick="cambiarEstado(this)">boton3</button>
        </div>
    </body>
He probado muchas cosas y no consigo nada. Ahora mismo ningún botón cambia de estilo..

Alguien me puede ayudar?
Graciaas
  #2 (permalink)  
Antiguo 17/02/2013, 06:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Estados relacionados de botones

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

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>reemplazar imagen</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. /* estilos por defecto */
  9. #Uno,#Dos,#Tres{
  10. border: none;
  11. background: cyan;
  12. cursor: pointer;
  13. }
  14. /*]]>*/
  15. <script type="text/javascript">
  16. //<![CDATA[
  17.  
  18. function reemplazar(cual){
  19. var capas = new Array("Uno", "Dos", "Tres");
  20. var i;
  21.     for(i in capas){
  22.         var e = document.getElementById(capas[i]);
  23.         capas[i] == cual?e.style.border='solid 2px red':e.style.border='none';
  24.         capas[i] == cual?e.style.background='lime':e.style.background='cyan';
  25.         // agregar más propiedades a modificar
  26.     }
  27. }
  28. //]]>
  29. </head>
  30. <p>
  31. <button id="Uno" onclick="reemplazar('Uno')">1</button>
  32. <button id="Dos" onclick="reemplazar('Dos')">2</button>
  33. <button id="Tres" onclick="reemplazar('Tres')">3</button>
  34. </p>
  35. </body>
  36. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 17/02/2013, 11:33
 
Fecha de Ingreso: mayo-2012
Mensajes: 25
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Estados relacionados de botones

Solucionado.
Gracias emprear, me has dado una idea.

Por si a alguien le interesa, he puesto esto:
Código:
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function cambiarEstado(btn,numero){
                var btn1 = document.getElementById("boton1");
                var btn2 = document.getElementById("boton2");
                var btn3 = document.getElementById("boton3");
                    
                if(numero==1){
                    btn.className ='estilo_cambia';
                    btn2.className ='estilo';
                    btn3.className ='estilo';
                }else if(numero==2){
                    btn.className ='estilo_cambia';
                    btn1.className ='estilo';
                    btn3.className ='estilo';
                }else{
                    btn.className ='estilo_cambia';
                    btn1.className ='estilo';
                    btn2.className ='estilo';
                }
            }
        </script>
        <style>
            .estilo{
            background-color: #CCCCCC;
            width:100px;
            height:20px;
            margin-bottom:10px;
            }
            .estilo_cambia{
            background-color: #0489B1;
            width:100px;
            height:20px;
            margin-bottom:10px;
            }
        </style>
    </head>
    <body>
        <button class="estilo" id="boton1" onClick="cambiarEstado(this,1)">boton1</button>
        <button class="estilo" id="boton2" onClick="cambiarEstado(this,2)">boton2</button>
        <button class="estilo" id="boton3" onClick="cambiarEstado(this,3)">boton3</button>
    </body>
</html>

Etiquetas: botones, estados, relacionados
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:02.