HTML中按钮的隐藏属性_Html_Button_Hidden

HTML中按钮的隐藏属性

html button

HTML中按钮的隐藏属性,html,button,hidden,Html,Button,Hidden,我试图在一次按钮点击中显示三个按钮。单击按钮之前，所有三个按钮都将隐藏。我设置了hidden属性，并在单击按钮时调用了一个函数。问题是，当我加载页面时，所有按钮都是可见的。在我添加CSS之前，它工作得非常好。我不明白问题出在哪里这是我的密码： .buttons a、.buttons按钮{ 显示：块；浮动：左；边际：0 7px 0；背景色：#F5；边框：1px实心#dedede；边框顶部：1px实心#eee；左边框：1px实心#eee；字体系列：“Lucida Grande”，T

我试图在一次按钮点击中显示三个按钮。单击按钮之前，所有三个按钮都将隐藏。我设置了hidden属性，并在单击按钮时调用了一个函数。问题是，当我加载页面时，所有按钮都是可见的。在我添加CSS之前，它工作得非常好。我不明白问题出在哪里

这是我的密码：

.buttons a、.buttons按钮{
显示：块；
浮动：左；
边际：0 7px 0；
背景色：#F5；
边框：1px实心#dedede；
边框顶部：1px实心#eee；
左边框：1px实心#eee；
字体系列：“Lucida Grande”，Tahoma，Arial，Verdana，无衬线；
字体大小：12px；
线高：130%；
文字装饰：无；
字体大小：粗体；
颜色：#5656；
光标：指针；
填充：5px 10px 6px 7px；/*链接*/
}
.按钮{
宽度：自动；
溢出：可见；
填充：4px 10px 3px 7px；/*IE6*/
}
.按钮[类型]{
填充：5px 10px 5px 7px；/*Firefox*/
线高：17px；/*Safari*/
}
*：第一个子项+html按钮[类型]{
填充：4px 10px 3px 7px；/*IE7*/
}
.按钮按钮img..按钮a img{
保证金：0 3px-3px 0！重要；
填充：0；
边界：无；
宽度：16px；
高度：16px；
}
/*标准*/
按钮：悬停，。按钮a：悬停{
背景色：#dff4ff；
边框：1px实心#c2e1ef；
颜色：#336699；
}
.按钮a：激活{
背景色：#6299c5；
边框：1px实心#6299c5；
颜色：#fff；
}
/*肯定的*/
按钮a.正极，.按钮a.正极{
颜色：#529214；
}
正：悬停，按钮正：悬停{
背景色：#E6EFC2；
边框：1px实心#C6D880；
颜色：#529214；
}
.按钮a.正极：激活{
背景色：#529214；
边框：1px实心#529214；
颜色：#fff；
}
/*否定的*/
.按钮a.阴性，按钮a.阴性{
颜色：#d12f19；
}
按钮a。负片：悬停，按钮。负片：悬停{
背景：#fbe3e4；
边框：1px实心#fbc2c4；
颜色：#d12f19；
}
.按钮a.负极：激活{
背景色：#d12f19；
边框：1px实心#d12f19；
颜色：#fff；
}
/*正规的*/
button.regular、.buttons a.regular{
颜色：#336699；
}
按钮常规：悬停，按钮常规：悬停{
背景色：#dff4ff；
边框：1px实心#c2e1ef；
颜色：#336699；
}
.按钮a.常规：激活{
背景色：#6299c5；
边框：1px实心#6299c5；
颜色：#fff；
}


无标题文件
函数更改（）{
document.getElementById（“保存”）.hidden=“”；
document.getElementById（“更改”）.hidden=“”；
document.getElementById（“取消”）.hidden=“”；
}
编辑
拯救
改变
取消


函数showButtons（）{$（'#b1，#b2，#b3'）。show（）；}
#b1、b2、b3{
显示：无；
}

如果您执行以下更改，它也可以在不使用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" alt=""/>
    Edit
</button>

<button type="submit" class="positive" name="save" id="save" style="display:none;">
    <img src="dba_images/apply2.png" alt=""/>
    Save
</button>

<button class="regular" name="change" id="change" style="display:none;">
    <img src="dba_images/textfield_key.png" alt=""/>
    change
</button>

    <button class="negative" name="cancel" id="cancel" style="display:none;">
        <img src="dba_images/cross.png" alt=""/>
        Cancel
    </button>
</div>
</form>
</body>
</html>


无标题文件
函数do_change（）{
document.getElementById（“保存”）.style.display=“块”；
document.getElementById（“更改”）.style.display=“块”；
document.getElementById（“取消”）.style.display=“块”；
}
编辑
拯救
改变
取消

jQuery是一个选项吗？我想你可以调用toggle（）方法来做你想做的事情。是的，我可以使用jQuery。能给我举个例子吗？嘿，谢谢。。。这是工作，但现在我要尝试使用css我用在我的按钮。

<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" alt=""/>
    Edit
</button>

<button type="submit" class="positive" name="save" id="save" style="display:none;">
    <img src="dba_images/apply2.png" alt=""/>
    Save
</button>

<button class="regular" name="change" id="change" style="display:none;">
    <img src="dba_images/textfield_key.png" alt=""/>
    change
</button>

    <button class="negative" name="cancel" id="cancel" style="display:none;">
        <img src="dba_images/cross.png" alt=""/>
        Cancel
    </button>
</div>
</form>
</body>
</html>