`
hjl416148489
  • 浏览: 22265 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

简单jQuery商品属性选择表单

阅读更多

我们经常会看到商城网站上,把商品加入购物车的时候,要先选择商品属性。今天我们就以最简单的代码做出这个效果。
<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星级评论表单代码.zip"是一个包含使用jQuery实现的简单、直观的星级评论表单的代码资源。这个项目旨在为用户提供一个轻量级且易于定制的解决方案,以便在网站上集成用户反馈系统,尤其是针对...

    jQuery购物车自动计算金额表单

    【jQuery购物车自动计算金额表单】是一个基于jQuery技术实现的简单购物车功能,它能够自动计算用户在购物车中选择商品的总价。这个功能在电商网站中非常常见,为用户提供了一个直观的方式来查看他们所选商品的总价值...

    jQuery点击选择购买月份年份代码.zip

    "jQuery点击选择购买月份年份代码"是一个专为网页设计的实用组件,它允许用户通过滑动方式方便地选取购买产品的月份和年份。这个功能常见于订阅服务、保险购买或预订系统等,提供了直观且友好的用户体验。 首先,...

    Struts2+jQuery ajax的一个商品小系统

    6. **JSP页面**:展示商品列表和详细信息,使用Struts2的标签库(如`s:form`、`s:textfield`等)构建表单,同时结合jQuery处理DOM元素,如显示/隐藏加载提示、更新商品列表。 7. **结果类型和拦截器**:Struts2的...

    jQuery选择器之表单元素选择器详解

    jQuery是目前最流行的JavaScript库之一,它极大地简化了HTML文档遍历和事件处理,以及动画和Ajax交互,...希望读者能够通过学习本文内容,熟练使用jQuery表单选择器,并在实际开发中广泛应用,提升开发效率和产品质量。

    jQuery_商品结算界面.rar

    1. **选择器与DOM操作**:jQuery的选择器功能强大,可以基于ID、类名、属性等多种条件快速定位页面元素。在商品结算界面,我们可以用`$("#elementID")`选取特定的DOM元素,如结算按钮、总价显示区域等。通过`.html()...

    jquery实现简单的表单验证

    本篇文章将详细介绍如何使用jQuery实现简单的表单验证。 首先,我们需要为表单中的必填字段添加一个特殊的标记,这通常是通过CSS类或自定义属性完成的。在这个例子中,使用了`:input.required`选择器来选取所有带有...

    jQuery淘宝购物车页面商品结算代码.zip

    在本项目"jQuery淘宝购物车页面商品结算代码.zip"中,我们主要探讨的是如何使用JavaScript的jQuery库来实现一个类似于淘宝购物车的商品结算功能。这个功能通常包括选择商品、更改商品数量、计算总价以及显示结算信息...

    jQuery动态表单生成图片预览效果适用于生成产品介绍.zip

    这个“jQuery动态表单生成图片预览效果适用于生成产品介绍”的压缩包内容,显然涉及到利用jQuery来创建一种互动式的产品介绍页面,其中包含了图片预览功能。下面我们将深入探讨这一主题。 首先,jQuery动态表单生成...

    jquery-ui-1.10.4

    1. **Dialog(对话框)**:jQuery UI 提供了强大的对话框组件,可以轻松创建模态或非模态对话框,支持自定义标题、大小、位置、按钮等属性,常用于弹窗提示、表单提交等场景。 2. **DatePicker(日期选择器)**:这...

    jquery java

    此外,jQuery提供了丰富的选择器,如ID选择器(`#id`)、类选择器(`.class`)、属性选择器(`[attr=value]`)等,使得选取DOM元素变得简单。 动画效果是jQuery的一大亮点。`.fadeIn()`, `.slideToggle()`, 和`.animate()...

    jQuery产品筛选导航菜单,高级搜索

    通过使用jQuery,开发者可以创建动态、响应式的菜单,使得用户可以根据不同属性(如价格、品牌、颜色等)筛选产品。例如,当用户点击某个筛选项时,菜单可以通过Ajax技术异步加载数据,无需刷新整个页面,从而提供...

    100多个 jquery例子

    1. **选择器**: jQuery 提供了丰富的选择器,如 ID 选择器(#id)、类选择器(.class)和元素选择器(element),使得选取DOM元素变得简单。 2. **DOM 操作**: jQuery 提供 `.html()`, `.text()`, `.append()`, `....

    jquery-easyui-1.2.2

    这些组件包括但不限于:数据网格(datagrid)、表单(form)、对话框(dialog)、菜单(menu)、下拉选择框(combobox)、滑块(slider)以及各种按钮和提示(tooltip)。这些组件不仅样式统一,而且功能强大,例如...

    Jquery实现ajax三级联动

    在网页开发中,"Jquery实现ajax三级联动"是一个常见的需求,主要用于动态更新页面内容,如下拉框的联动选择。这种技术可以提高用户体验,减少不必要的页面刷新。在这个场景中,我们将探讨如何利用jQuery和Ajax技术...

    jquery_range

    jQuery Range 提供了一种高效的解决方案,它是一个轻量级的插件,使得在HTML5中创建可滑动的选择器变得更加简单。这个插件通常用于实现左右滑动的选值功能,让用户能够通过直观地拖动滑块来选取介于某一范围内的值。...

    jqueryform.js

    当表单包含`&lt;input type="file"&gt;`元素时,插件会创建一个隐藏的IFrame,将表单数据提交到IFrame的src属性指定的URL,从而实现后台处理文件上传,同时保持页面的正常显示。 此外,jQuery Form插件还提供了文件上传...

    李炎恢jQuery EasyUI视频教程

    - **案例1:登录表单**:利用jQuery EasyUI中的表单、按钮和对话框组件实现一个简单的登录界面。 - **案例2:商品列表页**:运用表格组件展示商品信息,并通过工具栏实现筛选和排序功能。 - **案例3:个人中心页面**...

Global site tag (gtag.js) - Google Analytics