电商选择商品右下角图标

类似京东的选择商品，js中 通过append一个i标签 来切换选中的商品。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     *{margin: 0;padding: 0;}
 8     ul,li,ol{list-style: none;}
 9     a{text-decoration: none;}
10     .main{width: 600px;margin: 50px auto;}
11     .product_category{width: 520px}
12     .product_category li {float: left;margin-right: 8px;margin-bottom: 4px;position: relative;}
13     .product_category li a {display: block;border: 1px solid #ccc;height: 24px;line-height: 26px;font-size: 12px;padding: 0 5px;margin: 1px;transition: 0s;cursor: pointer;}
14     .product_category a:hover {border: 2px solid #e5004a;margin: 0;color: #e5004a;}
15     .product_category li.selected a {border: 2px solid #e5004a;margin: 0;}
16     .product_category li i.selected {position: absolute;bottom: 0;right: 0;width: 12px;height: 12px;overflow: hidden;text-indent: -99em;display: block;background: url("choose.png") no-repeat;}
17     </style>
18 </head>
19 <body>
20 <div class="main">
21     <div class="category_title">选择尺码:</div>
22     <div class="product_category dd">
23         <ul>
24             <li><a>蓝色 官方标配</a></li>
25             <li><a>红色 官方标配</a></li>
26             <li><a>蓝色 套餐一</a></li>
27             <li><a>蓝色 套餐二</a></li>
28             <li><a>红色 套餐一</a></li>
29             <li><a>红色 套餐二</a></li>
30         </ul>
31     </div>
32 </div>
33 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
34 <script type="text/javascript">
35 function selectMe(){
36     var selectIcon = $('<i class="selected"></i>');
37     $('.product_category li').click(function(){
38         $('.product_category li').removeClass('selected');
39         $(this).addClass('selected');
40         $(this).find('a').append(selectIcon);
41     })
42 }
43 selectMe();
44 </script>
45 </body>
46 </html>

 

posted @ 2016-11-14 17:18  明漠菌  阅读(88)  评论(0)    收藏  举报