javascript - 我正在尝试使图像出现 onclick,并且脚本未执行
问题描述
当您单击页面上的活动图像时,我正在尝试显示单独的图像。
我已经尝试将 onclick 移动到<a>
标签、<img>
标签、<div>
标签中,我尝试过使用不同版本的脚本命令,似乎没有任何效果。活动图像和光标:指针都可以工作,但是 java 失败了。有任何想法吗??
function opencontact() {
var x = document.getElementById("instagram");
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
.insta {
display: none;
position: fixed;
top: 180px;
right: 220px;
z-index: 2;
transition: 0s;
padding: 0px;
}
<div id="lips2" class="lipbtn2">
<span style="cursor:pointer" onclick="opencontact()">
<a>
<img src="https://www.country935.ca/wp-content/uploads/sites/19/2017/07/a-kiss.jpg" width="15%" height="auto" alt="" class="kiss2">
<img src="https://dzasv7x7a867v.cloudfront.net/product_photos/34277616/20150910_011229_1000w.png" width="15%" height="auto" alt="" class="kiss2active">
</a>
</span>
</div>
<div id="instagram" class="insta">
<a href="http://instagram.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png" alt="" width="124px" />
</a>
</div>
解决方案
您需要翻转测试,否则您将不得不单击两次
我不确定你还想发生什么
function opencontact() {
var x = document.getElementById("instagram");
x.style.display = x.style.display === "inline"? "none" : "inline"
}
.insta {
display: none;
position: fixed;
top: 180px;
right: 220px;
z-index: 2;
transition: 0s;
padding: 0px;
}
<div id="lips2" class="lipbtn2">
<span style="cursor:pointer" onclick="opencontact()">
<a>
<img src="https://www.country935.ca/wp-content/uploads/sites/19/2017/07/a-kiss.jpg" width="15%" height="auto" alt="" class="kiss2">
<img src="https://dzasv7x7a867v.cloudfront.net/product_photos/34277616/20150910_011229_1000w.png" width="15%" height="auto" alt="" class="kiss2active">
</a>
</span>
</div>
<div id="instagram" class="insta">
<a href="http://instagram.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png" alt="" width="124px" />
</a>
</div>
推荐阅读
- sql - 如何在单个 SELECT 查询中获取用户今天和本月的活动计数
- cassandra - nodetool tablestats Space used (live) 是否给出了集群上表的总大小或执行的节点上表的总大小?
- html - 如何使 figcaption 不移动图像?
- react-native - React Native – FlatList 滚动到底部,键盘向上
- python - 如何测试将 PDF 输入到 lambda 函数
- vba - 如何解决“查询表达式中的日期错误”
- .net - 使用 IEnumerable
在 .net 核心中添加对象的实例 - firebase - Firebase SDK 不会随机响应
- python - Tensorflow 2 适用于 Jupyter Notebook 但不适用于 VsCode
- c - C语言中的int a[]、int *a1[]、int *a2有什么区别?