1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>添加&删除&切换样式类型</title>
 6     <style>
 7       *{
 8           margin: 0;
 9           padding: 0;
10       }
11         div{
12             width: 400px;
13             height: 400px;
14             background: url("source/images/off.png");
15             background-size: 100% 100%;
16         }
17       button{
18           width: 80px;
19       }
20         .active{
21             background: url("source/images/on.png");
22             background-size: 100% 100%;
23         }
24 
25 
26     </style>
27 </head>
28 <body>
29 <div ></div>
30 <br/>
31 <br/>
32 <br/>
33 
34 <button id="off">开灯</button>
35 <button id="on">关灯</button>
36 <button id="auto">自动开关</button>
37 <script  src="js/jquery-3.3.1.js"></script>
38 <script>
39     window.onload=function () {
40         $("#off").click(function () {
41             $("div").addClass("active")
42         });
43         $("#on").click(function () {
44            $("div").removeClass("active");
45         })
46         $("#auto").click(function () {
47             $("div").toggleClass("active")
48         })
49     }
50 
51 </script>
52 </body>
53 </html>