点击选择-图片添加对号（单选）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3實(shí)現(xiàn)商品選擇</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>
總結(jié)
以上是生活随笔為你收集整理的点击选择-图片添加对号（单选）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： libvirt详解
- 下一篇： excel导出文件加密