图片的显示和隐藏

<!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>

猜你喜欢

转载自www.cnblogs.com/xuaima/p/10474480.html
今日推荐