Jquery实现图片的显示和隐藏

有点浪的程序员

于 2017-08-05 11:48:29 发布

阅读量4.6k

点赞数 4

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/chenlang02/article/details/76713975

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在页面加载时图片是不可见的，点击页面中的内容实现图片的显示，再次点击则图片会消失
直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片的隐藏和显示</title>
        <style type="text/css">
            .div{
                width: 200px;height: 270px;
                border: solid red;
            }
            .div img{
                max-width: 200px;_width:expression(this.width>200?"200px":this.width);
                display: none;
            }
        </style>
        <script src="../js/jquery.min.js"></script>
    </head>
    <body>
        <p>Show Me the<br />Furry Friend<br />of the Day </p>
        <div class="div">
            <img src="../img/mmexport1495807314176.jpg" />
        </div>
        <script>
            $(document).ready(function(){
                $("p").click(function(){
                    $(".div>img").toggle("slow");
                });
            });
        </script>
    </body>
</html>