एचटीएमएल

में बटन की छुपी हुई संपत्ति मैं एक बटन क्लिक पर तीन बटन दिखाने की कोशिश कर रहा हूं। एक बटन से पहले सभी तीन बटन छुपाएं क्लिक करें। मैंने छुपा संपत्ति सेट की है और मैं बटन क्लिक पर एक फ़ंक्शन भी कॉल कर रहा हूं। समस्या यह है कि, जब मैं पृष्ठ लोड करता हूं तो सभी बटन दिखाई देते हैं। सीएसएस जोड़ने से पहले यह पूरी तरह से काम कर रहा था। मुझे समझ में नहीं आता कि समस्या कहां है।
एचटीएमएल

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

यहाँ और सीएसएस मैं उपयोग कर रहा हूँ है: यहाँ एचटीएमएल कोड है।

.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; 
}

क्या परिवर्तन मैं कर सकते हैं ताकि जब मैं संपादित करें पर क्लिक करें यह तीन बटन false की hidden संपत्ति सेट कि। अग्रिम में धन्यवाद।

स्रोत

2012-07-06 ashah142

jQuery के लिए एक विकल्प है? मुझे लगता है कि आप जो चाहते हैं उसे करने के लिए बस एक टॉगल() विधि को कॉल कर सकते हैं। – Tim

हाँ मैं jQuery का उपयोग कर सकते हैं। मुझे ऐसा करने का उदाहरण देना संभव है कि ऐसा कैसे करें? – ashah142

यह भी jQuery के बिना काम करता है, तो आप निम्न परिवर्तन करें:

क्रम में संपादित करें बटन को type="button" जोड़े प्रपत्र प्रस्तुत करने को गति प्रदान करने के लिए नहीं।
अपने फ़ंक्शन का नाम change() से किसी और चीज़ में बदलें।
hidden="hidden" का उपयोग न करें, इसके बजाय सीएसएस का उपयोग करें: 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>

स्रोत

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>

स्रोत

2012-07-06 14:29:50 Brant

हे धन्यवाद ... यह काम कर रहा है लेकिन अब मैं अपने बटन में इस्तेमाल किए गए सीएसएस का उपयोग करके इसे आजमाऊंगा। – ashah142

उत्तर

संबंधित मुद्दे