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>
