zoukankan      html  css  js  c++  java
  • 自定义单选框或者复选框

    浏览器自己的单选框的样式是比较大众的,有时候我们的需要的单选框的样式和浏览器自带的不一样,这里我们就需要自己去定义单选框:

    中心思想就是不用了浏览器自带的radio,我们自己用js或者jq模拟出radio的样式和动作;其实就是一个选项卡的类型

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
            div{15px;height:15px;float:left;margin:10px;cursor:pointer;}
            div img{100%;height:100%}
            </style>
        </head>
        <body>
            <div><img src="img/1.png"/></div>
            <div><img src="img/1.png"/></div>
            <div><img src="img/1.png"/></div>
            <div><img src="img/1.png"/></div>
            <script src="js/jquery-1.7.2.js"></script>
            <script>
            $(function(){
                $("div").each(function(j){
                    $("div").eq(j).click(function(){
                        for(var i=0;i<$("div").length;i++){
                            $("div").eq(i).find("img").attr("src","img/1.png");
                            $("div").eq(i).attr("data-mark","no");
                        }
                        $("div").eq(j).find("img").attr("src","img/2.png");
                        $("div").eq(j).attr("data-mark","yes");
                        
                    });
                });
            });
            </script>
        </body>
    </html>
  • 相关阅读:
    怎样用HTML5 Canvas制作一个简单的游戏
    js面向对象
    javascript闭包
    javascript变量的作用域
    5-22
    5-23
    14-5-21 硬代码
    14-5-19 类和对象
    array
    生成干扰线
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6251784.html
Copyright © 2011-2022 走看看