码迷,mamicode.com
首页 > 其他好文 > 详细

模块代码之rank打分评星级

时间:2016-06-24 12:23:53      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

实现效果如下:

技术分享

HTML 结构如下:

<ul class="rank"> 
    <li>
        <label>服务态度</label>
        <dl>
            <dd class="selected"></dd>
            <dd></dd>
            <dd></dd>
            <dd></dd>
            <dd></dd>
        </dl>
    </li>
</ul>

主要CSS如下:

.rank dl dd {
    display: inline-block; width: 30px; height: 30px; margin-right: 10px; background: url(../imgs/sf51.jpg) no-repeat;
}
.rank dl dd.selected {
    background: url(../imgs/sf50.jpg);
}

JS如下:

$(‘.rank dd‘).click(function(){
    $(this).addClass("selected");
     $(this).prevAll().addClass("selected");
    $(this).nextAll().removeClass(‘selected‘);
});
$(‘.rank dd‘).dblclick(function(){
    $("dd").removeClass(‘selected‘);
});

 

 

  

模块代码之rank打分评星级

标签:

原文地址:http://www.cnblogs.com/shifan/p/5613762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!