复选框

复选框样式记录

<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>moban</title>

    <style>
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    
    #wrap{
        width: 600px;

        margin: 50px auto;
        user-select: none;
    }
    #wrap h3{
        font-size: 14px;
        line-height: 30px;
        border-bottom: 1px dashed #aaa;
    }
    #wrap ul li{
        float: left;
        list-style: none;

        margin-right: 20px;
        background: url("./img/ckbg1.jpg") no-repeat left center;

        text-indent: 25px;
        font-size: 12px;
        line-height: 30px;

        cursor: pointer;
    }
    #wrap ul li.on{
        background-image: url("./img/ckbg2.jpg");
    }



    </style>

</head>
<body>

    <div id="wrap">
        <h3>你喜欢的水果</h3>
        <ul>
          <li>上衣</li>
          <li>裤子</li>
          <li>鞋子</li>
          <li>袜子</li>
          <li>内衣</li>
        </ul>
      </div>



    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>
        /* 选项卡 */
        (function () {
            //获取标签li的权限
            let aoption = document.querySelectorAll("#wrap ul li"),
                //定义标签的length值,方便循环用
                alen = aoption.length
            //定义循环
            for (let i = 0; i <alen; i++) {
                //给节点标签定义一个初始状态
                aoption[i].ifchange = false
                //每个li标签点击事件函数
                aoption[i].onclick = function(){
                    //判断li是否是初始状态,是就是false,不是就true
                    if ( this.ifchange ) {
                        this.classList.remove("on");
                        this.ifchange = false; 
                    }else{
                        this.classList.add("on");
                        this.ifchange = true;
                    }
                };
            }; 
                /* console.log( aoption ); */

            /* for (let i = 0; i <alen; i++) {
               
               aoption[i].onclick = function(){
                   //class,有就去除名字,没有就添加名字,独有
                   this.classList.toggle("on");
               };
            }; */

        })();

    </script>
</body>
<!--
笔记区域




-->

</html>

posted @ 2021-01-15 02:23  小衣  阅读(252)  评论(0)  编辑  收藏  举报