图片点击，右下角勾选

迷南。 2023-06-18 05:53 3阅读 0赞

<!DOCTYPE html>  
<html>

<head>  
        <meta charset="UTF-8">  
        <title>图片点击，右下角勾选</title>  
        <style>  
            .wrap \{  
                position: relative;  
                width: 300px;  
                height: 200px;  
                margin-bottom: 5px;  
            \}  
              
            .f \{  
                position: absolute;  
                bottom: 0;  
                right: 0;  
                width: 40px;  
                height: 25px;  
                display: none;  
            \}  
        </style>  
    </head>

<body>  
        <div id="wrap">  
            <div class="wrap" style="background-image: url(images/ab.jpg);">  
                <img class="f" src="images/2.png" />  
            </div>  
            <div class="wrap" style="background-image: url(images/ab.jpg);">  
                <img class="f" src="images/2.png" />  
            </div>  
            <div class="wrap" style="background-image: url(images/ab.jpg);">  
                <img class="f" src="images/2.png" />  
            </div>  
            <div class="wrap" style="background-image: url(images/ab.jpg);">  
                <img class="f" src="images/2.png" />  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>  
    <script type="text/javascript">  
        $(function() \{  
            $('\#wrap div').each(function(i) \{  
                this.οnclick=function()\{  
                    if(i==false)\{  
                        $(this).children('img').css("display",'block');  
                        i = true;  
                    \}else\{  
                        $(this).children('img').css("display",'');  
                        i = false;  
                    \}  
                \}  
            \})  
        \})

</script>

</html>