用jquery单击切换颜色

复制代码
 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;
}
复制代码

 

posted @   倾心一刻  阅读(141)  评论(0)  编辑  收藏  举报
相关博文：
·  用jquery进行ajax渲染
·  用js写全选，单选复选框（多种方法）
·  JQuery基础28_案例4
·  修改radio单选按钮的“圆点”选中颜色
·  1.let
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示