五星评价 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;margin:30px auto;width:200px;}
        li{display:inline-block;width:19px;height:19px;background:url("3.png") no-repeat;}
        li.active{background:url("2.png") no-repeat;}
        li.lit{background:url("1.png") no-repeat;}
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $("li").each(function(){
        var $this=$(this);
        var $index=$this.index();
        $this.on("click",function(){
            if($index>2){
                $this.parent().find("li").removeClass("active");
                $this.parent().find("li").removeClass("lit");
                $this.addClass("active");
                $this.prevAll().addClass("active");
                $this.nextAll().removeClass("active");
            }else{
                $this.parent().find("li").removeClass("active");
                $this.parent().find("li").removeClass("lit");
                $this.addClass("lit");
                $this.prevAll().addClass("lit");
                $this.nextAll().removeClass("lit");
            }
        })
    })
</script>
</html>

posted @ 2016-09-12 11:36  dongxiaolei  阅读(173)  评论(0)  编辑  收藏  举报