如何在點擊Javascript中的按鈕後顯示div？

可能重複：
Javascript show element on click 如何在點擊Javascript中的按鈕後顯示div？

我有以下DIV。我想顯示按鈕，點擊後的DIV。現在它是顯示沒有

<div style="display:none;" class="answer_list" > WELCOME</div> 
<input type="button" name="answer" >

來源

2011-08-05 Karthick Terror

http://stackoverflow.com/ questions/4357291/javascript-show-element-on-click – pyvi

HTML代碼：

<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div> 
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

的Javascript：

function showDiv() { 
    document.getElementById('welcomeDiv').style.display = "block"; 
}

觀看演示：http://jsfiddle.net/rathoreahsan/vzmnJ/

來源

2011-08-05 13:59:25

Ahs拉索德，謝謝。如何顯示數組Div可以幫助我嗎？

–

它只顯示按鈕，但沒有顯示文本當我點擊時 – Ooker

HTML

<div id="myDiv" style="display:none;" class="answer_list" >WELCOME</div> 
<input type="button" name="answer" onclick="ShowDiv()" />

的JavaScript

function ShowDiv() { 
    document.getElementById("myDiv").style.display = ""; 
}

或者，如果你想使用jQuery用一個漂亮的小動畫：

<input id="myButton" type="button" name="answer" /> 

$('#myButton').click(function() { 
    $('#myDiv').toggle('slow', function() { 
    // Animation complete. 
    }); 
});

來源

2011-08-05 13:59:32

您的JQuery代碼更優雅，與document.getElementById一樣 - 當然只有在使用JQuery時纔有用：D –

@MarcinCylke，很棒的觀察：P –

顯然它是;-) –

<div style="display:none;" class="answer_list" > WELCOME</div> 
<input type="button" name="answer" onclick="document.getElementsByClassName('answer_list')[0].style.display = 'auto';">

來源

2011-08-05 14:00:03 pimvdb

getElementsByClassName將返回一整套項目..你需要聲明你想改變這樣一個getElementsByClassName（'foo'）[0]。 style.display ... – walialu

@詹姆斯希爾：你想爲這種情況申報一個函數嗎？（var）= document.getElementById（id）; if（d.style.display =='block'）d.style.display ='none'; return; d.style.display ='block'; } 在德國，我們稱之爲：Mit Kanonen auf Spatzenschießen！ – walialu

@Walialu，我明白你在說什麼，但作爲一般規則，內聯JS是一種不好的做法。 OP可能還有其他的JS在網站上運行。我把我的邏輯放在一個函數中，以便它可以添加到他/她已經引用的.js文件之一中。僅供參考 - 這是一個很好的閱讀：http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/。 –

<script type="text/javascript"> 
function showDiv(toggle){ 
document.getElementById(toggle).style.display = 'block'; 
} 
</script> 

<input type="button" name="answer" onclick="showDiv('toggle')">Show</input> 

<div id="toggle" style="display:none">Hello</div>

來源

2011-08-05 14:06:37 Terrik

如何在點擊Javascript中的按鈕後顯示div？

回答

相關問題