商品规格选择--添加背景色，并显示已选规格 

*{margin:0;padding:0;}
        ul{list-style:none;margin-top:20px;}
        .wrap{width:600px;margin:20px auto;}
        .clearfix{zoom:1;}
        .clearfix:after{content:".";width:0;height:0;visibility:hidden;clear:both;display:block;}
        .con{margin:10px;padding:10px;}
        li{float:left;margin-left:20px;padding:2px 6px;border:1px solid #ccc;cursor:pointer;position:relative;}
        s{display:none;width:12px;height:12px;position:absolute;bottom:0;right:0;background:url("sel.png") no-repeat;}
        li.sel{border:1px solid #c01110;}
        li.sel s{display:block;}
        .fl{float:left}
        .tit{margin-top:20px;}
css
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;margin-top:20px;}
        .wrap{width:600px;margin:20px auto;}
        .clearfix{zoom:1;}
        .clearfix:after{content:".";width:0;height:0;visibility:hidden;clear:both;display:block;}
        .con{margin:10px;padding:10px;}
        li{float:left;margin-left:20px;padding:2px 6px;border:1px solid #ccc;cursor:pointer;position:relative;}
        s{display:none;width:12px;height:12px;position:absolute;bottom:0;right:0;background:url("sel.png") no-repeat;}
        li.sel{border:1px solid #c01110;}
        li.sel s{display:block;}
        .fl{float:left}
        .tit{margin-top:20px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="con"></div>
    <div class="clearfix">
        <div class="tit fl">尺寸:</div>
        <ul class="ul0 gg fl clearfix">
            <li><span>大号</span><s></s></li>
            <li><span>中号</span><s></s></li>
            <li><span>小号</span><s></s></li>
        </ul>
    </div>
    <div class="clearfix">
        <div class="tit fl">材质:</div>
        <ul class="ul1 gg fl clearfix">
            <li><span>丝绵</span><s></s></li>
            <li><span>纯棉</span><s></s></li>
            <li><span>亚麻</span><s></s></li>
        </ul>
    </div>
    <div class="clearfix">
        <div class="tit fl">规格:</div>
        <ul class="ul2 gg fl clearfix">
            <li><span>11</span><s></s></li>
            <li><span>22</span><s></s></li>
            <li><span>33</span><s></s></li>
        </ul>
    </div>

    <div class="btn" style="margin-top:20px;width:80px;height:30px;line-height:30px;text-align:center;border:1px solid #ccc;cursor:pointer;">
        <a>提交</a></div>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>

</html>
html
   $("ul").each(function(i){
       $(this).on("click","li",function(){
           var ht=$(".con").html();
           $(this).addClass("sel");
           $(this).siblings().removeClass("sel");
           var $span="<span "+"class='ul"+i+"'>"+$(this).find("span").html()+"</span>";
           var cla="ul"+i;
           if($(".con span").hasClass(cla)==false){
                if($(".con span").length==0){
                    $(".con").append($span);
                }else{
                    $(".con").append(","+$span);
                }
           }else{
               $(".con span").filter("."+"ul"+i).html($(this).find("span").html());
           }

       })
   });
    $(".btn").on("click",function(){
       var len1=$(".gg").length;
        var len2=$(".con span").length;
        if(len1!=len2){
            alert("请选择规格")
        }else{
            $(this).find("a").attr("href","http://www.baidu.com");
        }

    })
js

 

posted @ 2016-08-08 16:10  dongxiaolei  阅读(350)  评论(0)    收藏  举报