使用onclick和javascript代碼在div中顯示圖像

Question

我試圖在不同的div中單擊同一圖像時在div中顯示圖像。 我有以下代碼可以做到這一點，但它不起作用。 Java腳本：

    function showDiv() {
    document.getElementById(this.id).style.display = "show";
    }

HTML代碼：

          <div class="row">
            <div class="col-md-4"><a href="#"><img id="1" 
            src="images/gmail.png" onclick="showDiv()"></a></div>
            <div class="col-md-4"><a href="#"><img id="2" 
               src="images/calender.png" onclick="showDiv()"></a></div>
            <div class="col-md-4"><a href="#"><img id="3" 
             src="images/Drive.png" onclick="showDiv()"></a></div>              
            </div>

請僅在沒有庫的情況下使用javascript函數。

Answer 1

應該是

document.getElementById(this.id).style.display = "block";

要么

document.getElementById(this.id).style.visibility = "visible";

Answer 2

CSS中沒有這樣的display='show' 。 您可以使用display:'block'你可以閱讀更多關於display屬性在這里你也需要通過this以showDiv獲得ID內部功能這樣onclick="showDiv(this)"

 function showDiv(event) { document.getElementById(event.id).style.display = "block"; } 

 <div class="row"> <div class="col-md-4"><a href="#"><img id="1" src="images/gmail.png" onclick="showDiv(this)"></a></div> <div class="col-md-4"><a href="#"><img id="2" src="images/calender.png" onclick="showDiv(this)"></a></div> <div class="col-md-4"><a href="#"><img id="3" src="images/Drive.png" onclick="showDiv(this)"></a></div> </div>