多重条件分类筛选js特效
介绍:
项目要后端来实现分类筛选功能,前端要去对应的参数传递到url参数里,网上找来的代码是有些是没有全部这个选项的,有些是ajax来请求数据的,后来还是花了时间写了这个插件
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="filter"> <dl> <dt>分类</dt> <dd> <a href="#" rel="" name="category" class="all on">全部</a> <a href="#" rel="video" name="category" class="sx_child">视频</a> </dd> </dl> <dl> <dt>主题</dt> <dd> <a href="#" rel="" name="zhuti" class="all on">全部</a> <a href="#" rel="jiangzuo" name="zhuti" class="sx_child">讲座</a> <a href="#" rel="kecheng" name="zhuti" class="sx_child">课程</a> </dd> </dl> <dl> <dt>老师</dt> <dd> <a href="#" rel="" name="laoshi" class="all on">全部</a> <a href="#" rel="dongjinyu" name="laoshi" class="sx_child">董进宇</a> </dd> </dl> <dl> <dt>类型</dt> <dd> <a href="#" rel="" name="leixing" class="all on">全部</a> <a href="#" rel="tupian" name="leixing" class="sx_child">图片</a> <a href="#" rel="wendang" name="leixing" class="sx_child">文档</a> <a href="#" rel="shipin" name="leixing" class="sx_child">视频</a> <a href="#" rel="yinpin" name="leixing" class="sx_child">音频</a> </dd> </dl> </div> |
说明:
name: 对应url里的参数名称rel: 对应url里参数的键值class: 对应子项的样式名称
例: http://aixue.860914.com/?laoshi=dongjinyu
Javascript:
1 2 3 4 5 6 7 8 9 10 11 | <script src="/js/jquery-1.10.2.js"></script> <script src="/js/tagSelect.js"></script> <script> $(function(){ new SelectTag({ child : ".sx_child", //所有筛选范围内的子类 over : 'on', //选中状态样式名称 all : ".all" }); }) </script> |
css:
1 2 3 4 5 6 7 8 | .filter { margin: 0 auto; width:98%; padding-top: 10px; padding-bottom: 10px; } .filter dl { position: relative; margin:5px 0; font-size:14px; } .filter dl:after { content: ""; display: block; clear: both ;} .filter dl dt {position: absolute; top: 0; left:5px; font-weight: 700; } .filter dl dd { padding-left: 40px;} .filter .all{margin-left: 10px;} .filter dl dd a { margin-right: 15px; margin-bottom: 5px; display: inline-block; } .filter dl dd a.on { font-weight: 700; color: #51aded; } |
浅唱6(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!
相关信息
本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。
如有需要请加QQ: 909912499