HTML中按钮的隐藏属性
Posted
技术标签:
【中文标题】HTML中按钮的隐藏属性【英文标题】：Hidden property of a button in HTML 【发布时间】：2012-07-07 00:28:30 【问题描述】：我试图在单击一次按钮时显示三个按钮。在单击按钮之前，所有三个按钮都被隐藏。我设置了隐藏属性，并且我还在单击按钮时调用了一个函数。问题是当我加载页面时所有按钮都是可见的。在我添加 CSS 之前它运行良好。我不明白问题出在哪里。
这是我的代码：
.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;
<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>
<script type="text/javascript">
function change()
document.getElementById("save").hidden = "";
document.getElementById("change").hidden = "";
document.getElementById("cancel").hidden = "";
</script>
</head>
<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" />
Edit
</button>
<button type="submit" class="positive" name="save" id="save" hidden="hidden">
<img src="dba_images/apply2.png" />
Save
</button>
<button class="regular" name="change" hidden="hidden" id="change">
<img src="dba_images/textfield_key.png" />
change
</button>
<button class="negative" name="cancel" id="cancel" hidden="hidden">
<img src="dba_images/cross.png" />
Cancel
</button>
</div>
</form>
</body>
</html>我可以进行哪些更改，以便在我单击编辑时将三个按钮的hidden 属性设置为false？
【问题讨论】：
可以选择 jQuery 吗？我想你可以调用一个 toggle() 方法来做你想做的事。 是的，我可以使用 jQuery。可以给我一个如何做到这一点的例子吗？ 【参考方案1】：如果您进行以下更改，它也可以在没有 jQuery 的情况下工作：
将type="button" 添加到编辑按钮，以免触发表单提交。
将函数名称从 change() 更改为其他任何名称。
不要使用hidden="hidden"，而是使用CSS：style="display: none;"。
以下代码适用于我：
<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 do_change()
document.getElementById("save").style.display = "block";
document.getElementById("change").style.display = "block";
document.getElementById("cancel").style.display = "block";
</script>
<body>
<form name="form1" method="post" action="">
<div class="buttons">
<button type="button" class="regular" name="edit" id="edit" onclick="do_change(); return false;">
<img src="dba_images/textfield_key.png" />
Edit
</button>
<button type="submit" class="positive" name="save" id="save" style="display:none;">
<img src="dba_images/apply2.png" />
Save
</button>
<button class="regular" name="change" id="change" style="display:none;">
<img src="dba_images/textfield_key.png" />
change
</button>
<button class="negative" name="cancel" id="cancel" style="display:none;">
<img src="dba_images/cross.png" />
Cancel
</button>
</div>
</form>
</body>
</html>
【讨论】：
【参考方案2】：<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
function showButtons () $('#b1, #b2, #b3').show();
</script>
<style type="text/css">
#b1, #b2, #b3
display: none;
</style>
</head>
<body>
<a href="#" onclick="showButtons();">Show me the money!</a>
<input type="submit" id="b1" value="B1" />
<input type="submit" id="b2" value="B2"/>
<input type="submit" id="b3" value="B3" />
</body>
</html>
【讨论】：
嘿，谢谢...它正在工作，但现在我要尝试使用我在按钮中使用的 css。以上是关于HTML中按钮的隐藏属性的主要内容，如果未能解决你的问题，请参考以下文章