jquery实现单击div切换背景 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.11.3/jquery.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">
            div {
                display: block;
            }
            
            .div1 {
                width: 100px;
                height: 50px;
                background: darkolivegreen;
                margin: 10px;
                float: left;
            }
            
            .stylediv {
                border: 1px solid red;
                background: white;
            }
        </style>

    </head>

    <body>

        <div class="div1">

        </div>
        <div class="div1">

        </div>
        <div class="div1">

        </div>
        <div class="div1">

        </div>
        <script type="text/javascript">
            $(function() {
                $(".div1").click(function() {
                    $(this).addClass("stylediv").siblings().removeClass("stylediv");

                });

            });
        </script>
    </body>

</html>

 

posted @ 2019-06-19 16:29  前端_小明  阅读(676)  评论(0)    收藏  举报