今天同事接到一个类似于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. Python - 私有属性(双下线的变形)

    __x会自动变形为_类名__x 正常情况 class A: def foo(self): print('from A') def test(self): self.foo() class B(A): ...

  2. 14 用DFT计算线性卷积

    用DFT计算线性卷积 两有限长序列之间的卷积 我们知道,两有限长序列之间的卷积可以用圆周卷积代替,假设两有限长序列的长度分别为\(M\)和\(N\),那么卷积后的长度为\(L=M+N-1\),那么用 ...

  3. Linux 目录结构与目录操作

    目录结构 Linux的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录"/",然后再次目录下再创建其他目录 在Linux系统中,一切皆文件 常见目录作用 / : 所有 ...

  4. 吴裕雄--天生自然Numpy库学习笔记:NumPy Matplotlib

    Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用,提供了一种有效的 MatLab 开源替代方案. 它也可以和图形工具包一起使用,如 PyQt 和 wxPython. W ...

  5. Mysql 一些细节方面解析(一)--MyISAM和InnoDB的主要区别和应用场景

    myisam和innodb 简介:myisam读的效果好,写的效率差,这和它数据存储格式,索引的指针和锁的策略有关的,它的数据是顺序存储的,他的索引btree上的节点是一个指向数据物理位置的指针,所以 ...

  6. location练习!(重点)

    写location最重要的就是hosts文件,添加一次域名跳转就得添加一条hosts文件 hosts文件: 192.168.200.120 www.a.com 192.168.200.119 www. ...

  7. 启动named服务报错!

    安装及配置bind服务程序: yum -y install bind 三个关键文件: 主配置文件(/etc/named.conf) 区域配置文件(/etc/named.rfc1912.zones) 数 ...

  8. 【NGINX】LINUX安装NGINX

    安装依赖() · yum install gcc · yum install pcre-devel · yum install zlib zlib-devel · yum install openss ...

  9. ThinkPHP5 动态生成图片缩略图

    需求场景 不同终端(PC端.手机端.平板),不同界面(列表页.详情页),对图片大小的要求不一样, 如果所有场景下都使用同一尺寸的图片,势必对会网络带宽及服务器性能造成一定的影响,由此需要服务器端能够根 ...

  10. [经验] Linux 怎么连接 Xshell?

    (1) 首先, 你要先有一个可以正常运行的 Linux 系统, 当然一般情况下我们是把这个系统放在虚拟机里的, 我所使用的是 ubuntu-18.04.2-live-server-amd64.iso ...