实现jQuery点击颜色切换的方法

2021-09-01 11:09:44
1739次星辉

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>点击颜色切换</title>  
<script src="jquery.min.js" type="text/javascript"></script>    
<style>  
.dd{float:left; padding:5px 10px; text-align:center; border:1px solid #eee; margin:10px; float:left; font-size:12px; cursor:pointer }  
.dd:hover{background-color:#eee;}  
</style>  
</head>  
<body>  
<div id="selOld">  
    <label id="1" class="dd" style="background-color:white">一</label>  
    <label id="2" class="dd" style="background-color:white">二</label>  
    <label id="3" class="dd" style="background-color:white">三</label>  
    <label id="5" class="dd" style="background-color:white">五</label>  
    <label id="11" class="dd" style="background-color:white">十一</label>  
</div>      
<div id="selLable" class="sel_div">  
</div>      
<script >  
$(function(){  
$("#selOld dd").css("background-color","rgb(255, 255, 255)");
$("#selOld").on("click",".dd",function(){      
    //$("#selOld dd").on(click,function(){
        if($(this).css("background-color")=="rgb(255, 255, 255)"){
            $(this).css("background-color","#87CEFA")
        }else if($(this).css("background-color")=="rgb(135, 206, 250)"){
       $(this).css("background-color","#FFFFFF");}
    //})
    })  
});  
</script>  
</body>  
</html>

以上就是星辉小编介绍的"实现jQuery点击颜色切换的方法"，希望对大家有帮助，想了解更多可查看 jQuery教程。星辉星辉在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。

上一篇：jQuery图片预览插件实现方法详解下一篇：jQuery页面加载完毕后执行事件