HTML多条件筛选商品
今天同事接到一个类似于JD的按条件筛选商品的功能,同事把这个锅出色的甩给了我,俺就勉为其难的解决了这个问题。
首先我们来理清一下思路:
1.条件切换时,tab选项卡肯定要跟着切换,而且只是一个大类条件下的切换。
2.当选中筛选条件时我们要获取到其对应的属性值重新给url赋值。
3.页面刷新后,我们要根据url参数去给对应的筛选条件加上被选中的样式。
完成后的效果图
下面我们开始写代码实现:
1.首先是HTML部分
2.css部分
3.js(使用的是jquery-1.8.0.min.js版本)
OK,到这里就算初步大功告成了(PS:没有做清除筛选条件,有兴趣的小伙伴可自行研究下),这里的重点是获取已选中的条件组成新的ur。本人第作为一个研发后端第一次来简书写前端帖子,献丑的地方请各位大神见谅。
HTML多条件筛选商品的更多相关文章
- JS前端数据多条件筛选(商品搜索)
有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛 ...
- 求解:php商品条件筛选功能你是怎么做出来的?
求解:php商品条件筛选功能你是怎么做出来的? 2013-09-25 13:43 chenhang607 | 浏览 2756 次 资源共享 求思路或者方法,最好能有些代码 2013-09-25 14: ...
- php商品条件筛选功能你是怎么做出来的?
php商品条件筛选功能你是怎么做出来的? php按条件筛选商品的功能,还是比较简单的.其实就是根据不同的条件组成SQL查询条件,从数据库里查出不同的商品出来.举个例子:用户可以按价格范围.按品牌.按商 ...
- 织梦CMS实现多条件筛选功能
用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...
- Django多条件筛选查询
转自:https://www.jianshu.com/p/a86281df530e Django多条件筛选查询 主模型只存在外键一对多关系 模型设计 # 快捷筛选状态 class Status(mod ...
- Redis命令拾遗四(集合类型)—包含简单搜索筛选商品设计实例。
本文版权,归博客园和作者吴双共同所有.转载和爬虫请注明博客园蜗牛Redis系列文章地址 http://www.cnblogs.com/tdws/tag/NoSql/ Redis数据类型之集合(Set) ...
- Hbase条件筛选
需求来自于,模糊查找当天的所有记录,并查找对应列的记录数 public static void main(String[] args) throws Exception{ //创建HBase连接 Co ...
- iOS: 悬浮的条件筛选框使用二
一.介绍: 在前面已经介绍了一种条件悬浮框,使用的是tableView的Plain分组样式实现的,因为这是tableView本身就具备的功能,分组悬浮效果.这次我来介绍第二种更加简单的方法,采用两个S ...
- iOS: 悬浮的条件筛选下拉框的使用
1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然 ...
随机推荐
- JavaSE复习~常量、变量、关键字、标识符
标识符.关键字 标识符:指程序中为了代表一些东西,用户自己定义的名字 关键字:系统预先定义的一些具有特殊意义的标识符, 保留字:系统预先定义,不作为关键字,也不允许用户使用 Java中的关键字: 标识 ...
- 《FA分享》---创业学习--训练营直播第二课--HHR
盛沛涵,以太白泽董事 一,基金投资的出发点: 1,这个赛道是否只有头部一两名有机会,如果不是,投的概率更大. 2, 基金投资的判断逻辑: 1.我是不是要在这个赛道布局 2.这个赛道分布如何,有 ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- 在tomcat启动时解析xml文件,获取特定标签的属性值,并将属性值设置到静态变量里
这里以解析hibernate.cfg.xml数据库配置信息为例,运用dom4j的解析方式来解析xml文件. 1.在javaWeb工程里新建一个java类,命名为GetXmlValue.java,为xm ...
- ES2.3.5版本的数据类型
1,最近使用了2.3.5版本的ES,发现在创建索引的时候出了以下错误. (1)例: POST 192.168.11.166:9200/article3/article/_mapping { " ...
- Java语言特性、加载与执行
[开源.免费.纯面向对象.跨平台] 简单性: 相对而言,例如,Java是不支持多继承的,C++是支持多继承的,多继承比较复杂:C++ 有指针,Java屏蔽了指针的概念.所以相对来说Java是简单的. ...
- win10上的程序兼容win7、xp等
- ajax的XmlHttpRequest对象常用方法
onreadystatechange用于检测readyState状态的改变,当readyState的状态发生改变的时候调用回调
- 《Interest Rate Risk Modeling》阅读笔记——第八章:基于 LIBOR 模型用互换和利率期权进行对冲
目录 第八章:基于 LIBOR 模型用互换和利率期权进行对冲 思维导图 推导浮息债在重置日(reset date)的价格 第八章:基于 LIBOR 模型用互换和利率期权进行对冲 思维导图 推导浮息债在 ...
- Go语言学习笔记(三)
一.浮点数 1.概述 浮点类型用于存储带有小数点的数字 一个整数数值可以赋值给浮点类型但是一个整型变量不可以赋值给浮点类型 浮点数进行运算的结果是浮点数 Go语言中浮点类型有两个 float32 fl ...