19
Tôi đang cố gắng hiển thị ba nút trên một lần nhấp nút. Trước khi một nút bấm, cả ba nút đều bị ẩn. Tôi thiết lập các tài sản ẩn và tôi cũng kêu gọi một chức năng trên một nút bấm. Vấn đề là, khi tôi tải trang tất cả các nút có thể nhìn thấy. Nó hoạt động hoàn hảo trước khi tôi thêm css. Tôi không hiểu vấn đề ở đâu. Đây là mã HTML:
thuộc tính ẩn của nút trong 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>
Và đây là css tôi đang sử dụng.
.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;
}
gì thay đổi tôi có thể làm để khi tôi bấm vào chỉnh sửa nó đặt hidden tài sản của ba nút false. Cảm ơn trước.
jQuery là một lựa chọn? Tôi nghĩ rằng bạn chỉ có thể gọi một phương thức toggle() để làm những gì bạn muốn. – Tim
Vâng tôi có thể sử dụng jQuery. Có thể cho tôi một ví dụ về làm thế nào để làm điều đó? – ashah142