只有一个按钮，实现点击按钮时显示和隐藏div1和div2，div1默认显示，div2默认隐藏...

最新推荐文章于 2023-06-03 17:56:54 发布

dengjian2850

最新推荐文章于 2023-06-03 17:56:54 发布

阅读量430

点赞数

原文链接：http://www.cnblogs.com/20170511CnoocDxpc/p/7530452.html

版权

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

转载于:https://www.cnblogs.com/20170511CnoocDxpc/p/7530452.html

dengjian2850

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
只有一个按钮，实现点击按钮时显示和隐藏div1和div2，div1默认显示，div2默认隐藏...

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>点击按钮时显示和隐藏</title> <style> img{ display: block; border:0;...
复制链接

扫一扫