我们经常会看到商城网站上,把商品加入购物车的时候,要先选择商品属性。今天我们就以最简单的代码做出这个效果。
<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");
})
})
jQuery商品筛选演示与下载:
http://www.sucaihuo.com/js/87.html
分享到:
相关推荐
最简单的用法是在输入文本标签上设置jsAutoCalc =“”属性,然后调用$("*").jAutoCalc();安装npm i -P jautocalc 包括: 带有源地图的开发版本: dist/jautocalc.js -24KB dist/jautocalc.js.map 最小化生产版本: ...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符...
2.5.2 基于表单的选择符 2.6 DOM遍历方法 2.6.1 为特定单元格添加样式 2.6.2 连缀 2.7 访问DOM元素 2.8 小结 第3章 事件 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择 3.1.2 基于一个页面执行多个...
jQuery DNA模板简单而强大的无损javascript模板系统。 允许您轻松构建和有效管理UI代码(或让Web设计人员做到这一点而又不会破坏构建UI的javascript代码)。 目录产品特点 支持具有类似于for-each行为的嵌套模板...
图灵机器人提供API、SDK及前端组件[2] 用户可快速的选择适用的方式[2] ,为产品接入图灵机器人大脑[2] ,实现产品人工智能交互升级。[2] 图灵机器人平台具备灵活的多场景整体解决方案[2] ,满足各场景产品的多样化...
《精通AngularJS》指出AngularJS诞生于Google,已用于开发多款Google产品。它是一套JavaScript前端框架,用于开发当下流行的数据驱动的单页面Web应用。其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...
9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品。让用户得到更详细的了解。 前台,产品展示 采用多图展示。同时也支持 删除产品的时候 删除上传的产品图片,以...