<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击按钮时显示和隐藏</title>
<style>
img{
display: block;
border:0;
}
#box2{
width:670px;
height:165px;
display: none;
}
</style>
<script src="js/jisuanqi.js"></script><!--导入id选择器的外部js文件-->
</head>
<body>
<button value="显示剩余图片" id="btn">显示剩余图片</button>
<div id="box1">
<img src="img/e1.jpg" alt="">
</div>
<div id="box2">
<img src="img/a1.jpg" alt="">
<img src="img/c1.jpg" alt="">
<img src="img/e1.jpg" alt="">
</div>
</body>
</html>
<script>
    var oBtn = $("btn");//获取id名字叫btn的元素
function fn(){
var oBox1= $("box1");//同上
var oBox2= $("box2");//同上
if(oBox1.style.display == "" || oBox2.style.display == "none"){
            oBox1.style.display="none";// div1默认是显示的,将div1隐藏
oBox2.style.display="block";//div2默认是隐藏的,将div2显示
oBtn.value = "隐藏这些图片";
oBtn.innerHTML = "隐藏这些图片";
}else{
oBox1.style.display="block";
oBox2.style.display="none";
oBtn.value = "显示多余图片";
oBtn.innerHTML = "显示多余图片";
        
//这里的oBtn.value和oBtn.innerHTML的值和做开始的值不一样是为了打开控制台看更改的效果,
}
}
oBtn.onclick = function () {
fn();
}

</script>
posted on 2017-09-16 10:55  丑晓芋  阅读(532)  评论(0编辑  收藏  举报