我们经常会看到商城网站上,把商品加入购物车的时候,要先选择商品属性。今天我们就以最简单的代码做出这个效果。
<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
分享到:
相关推荐
【标题】"简洁的jQuery星级评论表单代码.zip"是一个包含使用jQuery实现的简单、直观的星级评论表单的代码资源。这个项目旨在为用户提供一个轻量级且易于定制的解决方案,以便在网站上集成用户反馈系统,尤其是针对...
【jQuery购物车自动计算金额表单】是一个基于jQuery技术实现的简单购物车功能,它能够自动计算用户在购物车中选择商品的总价。这个功能在电商网站中非常常见,为用户提供了一个直观的方式来查看他们所选商品的总价值...
"jQuery点击选择购买月份年份代码"是一个专为网页设计的实用组件,它允许用户通过滑动方式方便地选取购买产品的月份和年份。这个功能常见于订阅服务、保险购买或预订系统等,提供了直观且友好的用户体验。 首先,...
6. **JSP页面**:展示商品列表和详细信息,使用Struts2的标签库(如`s:form`、`s:textfield`等)构建表单,同时结合jQuery处理DOM元素,如显示/隐藏加载提示、更新商品列表。 7. **结果类型和拦截器**:Struts2的...
jQuery是目前最流行的JavaScript库之一,它极大地简化了HTML文档遍历和事件处理,以及动画和Ajax交互,...希望读者能够通过学习本文内容,熟练使用jQuery表单选择器,并在实际开发中广泛应用,提升开发效率和产品质量。
1. **选择器与DOM操作**:jQuery的选择器功能强大,可以基于ID、类名、属性等多种条件快速定位页面元素。在商品结算界面,我们可以用`$("#elementID")`选取特定的DOM元素,如结算按钮、总价显示区域等。通过`.html()...
本篇文章将详细介绍如何使用jQuery实现简单的表单验证。 首先,我们需要为表单中的必填字段添加一个特殊的标记,这通常是通过CSS类或自定义属性完成的。在这个例子中,使用了`:input.required`选择器来选取所有带有...
在本项目"jQuery淘宝购物车页面商品结算代码.zip"中,我们主要探讨的是如何使用JavaScript的jQuery库来实现一个类似于淘宝购物车的商品结算功能。这个功能通常包括选择商品、更改商品数量、计算总价以及显示结算信息...
这个“jQuery动态表单生成图片预览效果适用于生成产品介绍”的压缩包内容,显然涉及到利用jQuery来创建一种互动式的产品介绍页面,其中包含了图片预览功能。下面我们将深入探讨这一主题。 首先,jQuery动态表单生成...
1. **Dialog(对话框)**:jQuery UI 提供了强大的对话框组件,可以轻松创建模态或非模态对话框,支持自定义标题、大小、位置、按钮等属性,常用于弹窗提示、表单提交等场景。 2. **DatePicker(日期选择器)**:这...
此外,jQuery提供了丰富的选择器,如ID选择器(`#id`)、类选择器(`.class`)、属性选择器(`[attr=value]`)等,使得选取DOM元素变得简单。 动画效果是jQuery的一大亮点。`.fadeIn()`, `.slideToggle()`, 和`.animate()...
通过使用jQuery,开发者可以创建动态、响应式的菜单,使得用户可以根据不同属性(如价格、品牌、颜色等)筛选产品。例如,当用户点击某个筛选项时,菜单可以通过Ajax技术异步加载数据,无需刷新整个页面,从而提供...
1. **选择器**: jQuery 提供了丰富的选择器,如 ID 选择器(#id)、类选择器(.class)和元素选择器(element),使得选取DOM元素变得简单。 2. **DOM 操作**: jQuery 提供 `.html()`, `.text()`, `.append()`, `....
这些组件包括但不限于:数据网格(datagrid)、表单(form)、对话框(dialog)、菜单(menu)、下拉选择框(combobox)、滑块(slider)以及各种按钮和提示(tooltip)。这些组件不仅样式统一,而且功能强大,例如...
在网页开发中,"Jquery实现ajax三级联动"是一个常见的需求,主要用于动态更新页面内容,如下拉框的联动选择。这种技术可以提高用户体验,减少不必要的页面刷新。在这个场景中,我们将探讨如何利用jQuery和Ajax技术...
jQuery Range 提供了一种高效的解决方案,它是一个轻量级的插件,使得在HTML5中创建可滑动的选择器变得更加简单。这个插件通常用于实现左右滑动的选值功能,让用户能够通过直观地拖动滑块来选取介于某一范围内的值。...
当表单包含`<input type="file">`元素时,插件会创建一个隐藏的IFrame,将表单数据提交到IFrame的src属性指定的URL,从而实现后台处理文件上传,同时保持页面的正常显示。 此外,jQuery Form插件还提供了文件上传...
- **案例1:登录表单**:利用jQuery EasyUI中的表单、按钮和对话框组件实现一个简单的登录界面。 - **案例2:商品列表页**:运用表格组件展示商品信息,并通过工具栏实现筛选和排序功能。 - **案例3:个人中心页面**...