jquery 實現點擊顏色切換

時間 2019-12-14

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。