<!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 实现点击颜色切换
猜你喜欢
转载自www.cnblogs.com/paisen/p/9121129.html
今日推荐
周排行