19
Estoy tratando de mostrar tres botones con un solo clic. Antes de hacer clic en un botón, los tres botones están ocultos. Configuré la propiedad oculta y también estoy llamando a una función al hacer clic en un botón. El problema es que cuando cargo la página, todos los botones están visibles. Estaba funcionando perfectamente antes de agregar css. No entiendo dónde está el problema. Aquí está el código HTML:
propiedad oculta del botón en html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function change(){
document.getElementById("save").hidden = "";
document.getElementById("change").hidden = "";
document.getElementById("cancel").hidden = "";
}
</script>
<body>
<form name="form1" method="post" action="">
<div class="buttons">
<button class="regular" name="edit" id="edit" onclick="change();">
<img src="dba_images/textfield_key.png" alt=""/>
Edit
</button>
<button type="submit" class="positive" name="save" id="save" hidden="hidden">
<img src="dba_images/apply2.png" alt=""/>
Save
</button>
<button class="regular" name="change" hidden="hidden" id="change">
<img src="dba_images/textfield_key.png" alt=""/>
change
</button>
<button class="negative" name="cancel" id="cancel" hidden="hidden">
<img src="dba_images/cross.png" alt=""/>
Cancel
</button>
</div>
</form>
</body>
</html>
Y aquí está el css estoy usando.
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:12px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
/* REGULAR */
button.regular, .buttons a.regular{
color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a.regular:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
¿Qué cambios puedo hacer para que cuando hago clic en Editar se define la propiedad hidden de tres botones false. Gracias por adelantado.
Es jQuery es una opción? Creo que puedes llamar a un método toggle() para hacer lo que quieras. – Tim
Sí, puedo usar jQuery. ¿Es posible darme un ejemplo de cómo hacer eso? – ashah142