当前位置: 首页 >分享

多重条件分类筛选js特效

分享 2020-2-25 阅读量: 126 TAG:

介绍:
项目要后端来实现分类筛选功能,前端要去对应的参数传递到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; }

来源:(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!

相关信息

本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。

如有需要请加QQ: 909912499