图片的显示和隐藏

Posted xuaima

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片的显示和隐藏相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
#air,#nv{
border: 1px solid red;
width: 300px;
height: 300px;
float: left;
text-align: center;
}
</style>
<script>
// $(function(){
// $("#but").click(function(){
// $("#a1").toggle();
//
// });
// $("#but").click(function(){
// $("#a2").toggle();
// });
// });
// function init(){
// document.getElementById("but").onclick=function(){
// document.getElementById("a1").style.display="none";
// document.getElementById("a2").style.display="block";
// }
// document.getElementById("but").onclick=function(){
// document.getElementById("a1").style.display="block";
// document.getElementById("a2").style.display="none";
// }
// }

function init(){
// document.getElementById("but").onclick=function(){
var a=document.getElementById("a1");
var b=document.getElementById("a2");

if(a.style.display=="none"){
a.style.display="block";
b.style.display="none";
}else{
a.style.display="none";
b.style.display="block";
// }
}
}
</script>
</head>
<body <!--onload="init()"-->
<div>
<input type="button" name="but" id="but" value="显示" onclick="init()"/>
<!--<input type="button" name="but1" id="but1" value="隐藏" /><br />-->

<div id="air">
<img src="img/飞机05.gif" style="display: block;" id="a1"/>
</div>
<div id="nv">
<img src="img/3.jpg" style="display: none;" id="a2"/>
</div>
</div>
</body>
</html>

以上是关于图片的显示和隐藏的主要内容,如果未能解决你的问题,请参考以下文章

js--1图片切换,定时器,自动轮播,图片显示隐藏

js如何判断div里面的图片为空隐藏,否则显示,如下图?

jQuery显示-隐藏图片的小案例,适合入门

图片的显示和隐藏

点击按钮显示和隐藏图片精简方法

JavaScript基础 显示/隐藏效果 点击图片,DIV显示,图片更换,点击更换后的图片,DIV隐藏