今天同事接到一个类似于JD的按条件筛选商品的功能,同事把这个锅出色的甩给了我,俺就勉为其难的解决了这个问题。

首先我们来理清一下思路:

1.条件切换时,tab选项卡肯定要跟着切换,而且只是一个大类条件下的切换。

2.当选中筛选条件时我们要获取到其对应的属性值重新给url赋值。

3.页面刷新后,我们要根据url参数去给对应的筛选条件加上被选中的样式。

完成后的效果图

下面我们开始写代码实现:

1.首先是HTML部分

2.css部分

3.js(使用的是jquery-1.8.0.min.js版本)

OK,到这里就算初步大功告成了(PS:没有做清除筛选条件,有兴趣的小伙伴可自行研究下),这里的重点是获取已选中的条件组成新的ur。本人第作为一个研发后端第一次来简书写前端帖子,献丑的地方请各位大神见谅。

HTML多条件筛选商品的更多相关文章

  1. JS前端数据多条件筛选(商品搜索)

    有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛 ...

  2. 求解:php商品条件筛选功能你是怎么做出来的?

    求解:php商品条件筛选功能你是怎么做出来的? 2013-09-25 13:43 chenhang607 | 浏览 2756 次 资源共享 求思路或者方法,最好能有些代码 2013-09-25 14: ...

  3. php商品条件筛选功能你是怎么做出来的?

    php商品条件筛选功能你是怎么做出来的? php按条件筛选商品的功能,还是比较简单的.其实就是根据不同的条件组成SQL查询条件,从数据库里查出不同的商品出来.举个例子:用户可以按价格范围.按品牌.按商 ...

  4. 织梦CMS实现多条件筛选功能

    用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...

  5. Django多条件筛选查询

    转自:https://www.jianshu.com/p/a86281df530e Django多条件筛选查询 主模型只存在外键一对多关系 模型设计 # 快捷筛选状态 class Status(mod ...

  6. Redis命令拾遗四(集合类型)—包含简单搜索筛选商品设计实例。

    本文版权,归博客园和作者吴双共同所有.转载和爬虫请注明博客园蜗牛Redis系列文章地址 http://www.cnblogs.com/tdws/tag/NoSql/ Redis数据类型之集合(Set) ...

  7. Hbase条件筛选

    需求来自于,模糊查找当天的所有记录,并查找对应列的记录数 public static void main(String[] args) throws Exception{ //创建HBase连接 Co ...

  8. iOS: 悬浮的条件筛选框使用二

    一.介绍: 在前面已经介绍了一种条件悬浮框,使用的是tableView的Plain分组样式实现的,因为这是tableView本身就具备的功能,分组悬浮效果.这次我来介绍第二种更加简单的方法,采用两个S ...

  9. iOS: 悬浮的条件筛选下拉框的使用

    1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然 ...

随机推荐

  1. jq基础(2)

    jquery的选择器 基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <html& ...

  2. python opencv:色彩空间

    RGB色彩空间 常见的色彩空间 色彩空间的转换 cv2.cvtColor(image, 转换选项) 常见的两个颜色转换 HSV与RGB YUV与RGB inRange方法 函数参数: 第一个参数:是原 ...

  3. python opencv:图像的一些属性与操作

    img = cv.imread(xxx) # 常用的有以下属性 type(img) # img的数据类型 img.shape # img的结构 img.size # img的大小 img.dtype ...

  4. Springboot学习:介绍与HelloWorld

    1. 什么是 Spring boot Spring Boot来简化Spring应用开发,约定大于配置,去繁从简,just run就能创建一个独立的,产品级别的应用 整个Spring技术栈的一个大整合 ...

  5. Qt连接mysql数据库遇到QMYSQL driver not loaded

    本文件向各位博友分享一下我在Qt开发过程中,连接mysql数据库时遇到的问题,以及解决的方法,希望对遇到同样问题的博友有所帮助. 工程运行环境:vs2015+Qt5.8 在开发过程中,编写数据库连接函 ...

  6. ubuntu循环登录

    ubuntu12.04管理员账户登录不了桌面,只能客人会话登录 登录管理员账户时,输入密码后,一直在登录界面循环 费了好大劲啊,一上午的时间,终于搞定了,哈哈哈 ctrl+alt+f1 ,切换到tty ...

  7. nyoj 57

    6174问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 假设你有一个各位数字互不相同的四位数,把所有的数字从大到小排序后得到a,从小到大后得到b,然后用a-b替 ...

  8. Spark操作MySQL,Hive并写入MySQL数据库

    最近一个项目,需要操作近70亿数据进行统计分析.如果存入MySQL,很难读取如此大的数据,即使使用搜索引擎,也是非常慢.经过调研决定借助我们公司大数据平台结合Spark技术完成这么大数据量的统计分析. ...

  9. linux命令行大全第四章[通配符的使用]

    通配符示例 1.创建几个文件及目录 补充创建一个以大写字母开头的文件. 2.1显示所有文件及目录 2.2显示所有以1开头的文件及目录 2.3显示以a开头.txt结尾的文件 2.4显示以e开头,后跟任意 ...

  10. 【C++初学者自学笔记二】函数重载(模块一)

    1.概念:同意作用域的一组参数列表不同,函数名相同的函数,这组函数叫函数重载(C语言是不能定义相同名称的函数,但是C++可以允许定义). 2作用:重载函数通常来命名一组功能相似的函数,这样做减少了函数 ...