<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3实现商品选择</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { padding:0; margin:0; } li { position:relative; list-style:none; float:left; margin-right:20px; } img { width:120px; height:80px; cursor:pointer; } a.on { display:inline-block; width:10px; height:5px; background:red; line-height:0; font-size:0; vertical-align:middle; -webkit-transform:rotate(45deg); position:absolute; right:13px; bottom:5px; } a.on:after { content:'/'; display:block; width:20px; height:5px; background:red; -webkit-transform:rotate(-90deg) translateY(-50%) translateX(50%); position:absolute; } </style> </head> <body> <p>请选择</p> <ul id="products"> <li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt=""> <a href="javascript:;" class="on"></a> </li> <li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt=""> <a href="javascript:;"></a> </li> <li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt=""> <a href="javascript:;"></a> </li> <li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt=""> <a href="javascript:;"></a> </li> <li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt=""> <a href="javascript:;"></a> </li> </ul> <script> $("img").eq(0).css({ border: "1px solid red" }); $("#products li").on('click', function() { $(this).find("a").addClass('on').parents('li').siblings('li').find("a").removeClass("on"); $("img").eq($(this).index()).css({ border: "1px solid red", }).parents("li").siblings().find("img").css({ border: "none", }); }) </script> </body> </html>
