[英]Show image in div using onclick and javascript code
I am trying to show an image in div when the same image is clicked in a different div. 我试图在不同的div中单击同一图像时在div中显示图像。 I have the following code to do that but it is not working.
我有以下代码可以做到这一点,但它不起作用。 Java Script:
Java脚本:
function showDiv() {
document.getElementById(this.id).style.display = "show";
}
HTML Code: 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>
Please use javascript function only without libraries. 请仅在没有库的情况下使用javascript函数。
It should be either 应该是
document.getElementById(this.id).style.display = "block";
or 要么
document.getElementById(this.id).style.visibility = "visible";
There is no such display='show'
in css. CSS中没有这样的
display='show'
。 You can use display:'block'
You can read more about display
property here Also you need to pass this
to showDiv in order to get id inside function like this onclick="showDiv(this)"
您可以使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.