實現(xiàn)jQuery點擊顏色切換的方法

更新時間：2021-09-01 11:09:44 來源：動力節(jié)點瀏覽2100次

<!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>

以上就是動力節(jié)點小編介紹的"實現(xiàn)jQuery點擊顏色切換的方法"，希望對大家有幫助，想了解更多可查看 jQuery教程。動力節(jié)點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。

jQuery教程