1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <link rel="stylesheet" href="./bian.css">
9 <script src="./js/jquery-3.6.0.js"></script>
10 </head>
11 <body>
12 <ul class="qin_q">
13 <li class="green"></li>
14 <li class="green"></li>
15 <li class="green"></li>
16 </ul>
17 </body>
18 <script>
19 $(function(){
//调用变量名设单击事件
20 $(".qin_q li").click(function(){
//给他切换颜色 toggleClass()对设置和移除被选元素的一个或多个类进行切换，有则删除，无则加
21 $(this).toggleClass("red")
22
23 })
24 })
25 </script>
26 </html>
css代码
*{
padding:0px;
margin: 0px;
font-family:微软雅黑;
}
html,body{
width:100%;
height:100;
}
a{
text-decoration: none;
color: #333;
}
ul,ol,li{
list-style:none;
}
.qin_q{
width: 300px;
height: 300px;
margin: 0 auto;
align-items: center;
display: flex;
justify-content: space-around;
}
.qin_q .green{
width: 20%;
height: 20%;
border: 2px solid #d61818;
background-color: aqua;
}
.qin_q .red{
background-color: #d61818;
}
标签：jquery,qin,单击,color,height,width,切换 From： https://www.cnblogs.com/BlogRegisterqin/p/17219821.html