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