ukryta własność przycisku w html

Próbuję pokazać trzy przyciski jednym kliknięciem przycisku. Przed kliknięciem przycisku wszystkie trzy przyciski są ukryte. Ustawiam ukrytą właściwość, a także wywołuję funkcję po kliknięciu przycisku. Problem polega na tym, że po załadowaniu strony cały przycisk jest widoczny. To działało idealnie zanim dodałem cs. Nie rozumiem, gdzie jest problem. Oto kod HTML:ukryta własność przycisku w 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>

A tutaj jest używany 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; 
}

Jakie zmiany mogę zrobić tak, że po kliknięciu na edycję ustawia właściwość trzech przycisków falsehidden. Z góry dziękuję.

Źródło

2012-07-06 ashah142

Czy jQuery opcja? Myślę, że możesz po prostu wywołać metodę toggle(), aby zrobić to, co chcesz. – Tim

Tak, mogę używać jQuery. Czy mogę podać przykład tego, jak to zrobić? – ashah142

działa również bez jQuery jeśli zrobisz następujące zmiany:

Dodaj type="button" na przycisk Edytuj, aby nie spowodować złożenie formularza.
Zmień nazwę swojej funkcji z change() na cokolwiek innego.
Nie używaj hidden="hidden", użyj CSS zamiast: style="display: none;".

Poniższy kod działa dla mnie:

<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>

Źródło

2012-07-06 14:40:08 Aletheios

<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>

Źródło

2012-07-06 14:29:50 Brant

hej dziękuje ... działa, ale teraz spróbuję użyć css, którego użyłem w moich przyciskach. – ashah142

ukryta własność przycisku w html

Odpowiedz

Powiązane problemy