zoukankan      html  css  js  c++  java
  • jquery 实现点击颜色切换

    <!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>
  • 相关阅读:
    生涯路
    事件与window的基本操作
    js操作
    c# 函数
    布局页面CSS
    网页填写的基本操作
    框架集
    网页的基本操作1
    存储与触发器
    常用的函数
  • 原文地址:https://www.cnblogs.com/paisen/p/9121129.html
Copyright © 2011-2022 走看看