原生js实现多条件多字段筛选效果代码
代码语言:html
所属分类:其他
代码描述:原生js实现多条件筛选效果代码,用于列表信息多字段帅选。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color: #FCFCFC; } dl, dd { margin: 0; } #box { width: 850px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 10px rgba(73,66,66,.1); margin: 50px auto; border: 1px solid #E5E5E5; } #box dl { height: 50px; line-height: 50px; border-bottom: 1px dashed #dadada; margin: 0 20px; } #box dt { float: left; color: #8a8a8a; } #box dd { float: left; color: #252525; margin: 0 10px; font-size: 14px; cursor: pointer; } #box dd.active { color: #c4284d; font-weight: bold; } #box dl.select { background: #efefef; margin: 0; padding: 0 20px; } #box dl.select dd{ border: 1px solid #c4284d; height: 25px; line-height: 25px; margin-top: 13px; padding: 0 2px 0 10px; border-radius: 3px;background-color: #fff; } #box dl.select dd span{ width: 20px; height: 20px; display: inline-block; text-align: center; line-height: 20px; background: #c4284d; color: #fff; margin-left: 10px; cursor: pointer;border-radius: 5px; } </style> </head> <body> <div id="box"> <dl> <dt>品牌:</dt> <dd>惠普</dd> <dd>联想</dd> <dd>戴尔</dd> <dd>三星</dd> <dd>宏基</dd> <dd>苹果</dd> <dd>神舟</dd> <dd>华硕</dd> <dd>方正</dd> </dl> <dl> <dt>价格:</dt> <dd>3000-3999</dd> <dd>4000-4999</dd> <dd>5000-5999</dd> <dd>6000-6999</dd> <dd>7000-7999</dd> <dd>8000-8999</dd> <dd>9000-9999</dd> <dd>10000以上</dd> </dl> <dl> <dt>尺寸:</dt> <dd>8.9英寸以及以下</dd> <dd>11英寸</dd> <dd>12英寸</dd> <dd>13英寸</dd> <dd>14英寸</dd> <dd>15英寸</dd> <dd>16英寸</dd> </dl> <dl style="border: none"> <dt>显卡:</dt> <dd>独立显卡</dd> <dd>集成显卡</dd> <dd>核芯显卡</dd> </dl> <dl class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0