简单jQuery商品属性选择表单

最新推荐文章于 2019-09-25 12:01:04 发布

hjl416148489

最新推荐文章于 2019-09-25 12:01:04 发布

阅读量702

点赞数

文章标签：商品筛选表弟

本文链接：https://blog.csdn.net/hjl416148489/article/details/84736126

版权

[img]http://www.sucaihuo.com/jquery/0/87/big.jpg[/img]
我们经常会看到商城网站上，把商品加入购物车的时候，要先选择商品属性。今天我们就以最简单的代码做出这个效果。

<form>  
   <ul>  
    <li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <em>金色<i></i></em> <em>银色<i></i></em> </li>  
    <li><span>内存</span> <em class="yListrclickem">16G ROM<i></i></em> </li>  
    <li><span>尺寸</span> <em class="yListrclickem">5.5寸<i></i></em> </li>  
    <li><span>尺寸</span> <em class="yListrclickem">港版（二网）<i></i></em> <em>类型<i></i></em> </li>  
   </ul>  
   <p class="colorp00"> 价值：<em>￥6099.00</em> <span>月供：<em>6281.97</em>元（本金：<em>6099.00</em>元 + 服务费：<em>182.97</em>元）分期 x <em>1个月</em></span> </p> 
...... 
</form>

$(function() { 
    $(".yListr ul li em").click(function() { 
        $(this).addClass("yListrclickem").siblings().removeClass("yListrclickem"); 
    }) 
})

[b]jQuery商品筛选演示与下载[/b]：[url]http://www.sucaihuo.com/js/87.html[/url]