多重条件分类筛选js特效

话不多说，直接上代码，不会的自己测试，删除添加，一步一步的操作，多看几次就看懂了，当然了，需要引入jQuery，自己下载

HTML

按条件筛选

教学方式

不限
自学
教学

年龄

不限
0-10岁
10-20岁
20-30岁
30-40岁
40-50岁
50-60岁
60岁及以上

所属行业

不想
汽车
大健康
节能环保
智能信息
文化旅游
新材料
高端装备
其他行业

所属地域

不限
东北
华东
华北
华中
华南
西南
西北

工资区间

不限 3000以下 3000-5000 5000-8000 8000-10000 1-1.5万 1.5万以上

发布时间

全部 最近一天 最近三天 最近一周 最近两周

CSS

body { margin: 0; padding: 0; color: #444; font-size: 12px; font-family: tahoma, arial, 'Hiragino Sans GB', 'Microsoft Yahei'; }
ul, li, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; }
li { list-style: none; }
img { display: block; border: 0; }
a { color: #444; text-decoration: none; }
.container { width: 1200px; margin: 0 auto; }
.clearfix:after { content: " "; display: block; clear: both; }
.filter { padding-top: 15px; padding-bottom: 15px; background: #f9fbfe }
.filter .box { padding: 24px; border: 1px solid #dcdcdc; background-color: #fff }
.filter .title-h { font-size: 14px; border-bottom: 1px solid #dcdcdc; padding-bottom: 10px }
.filter dl { position: relative; margin-bottom: 10px }
.filter dl:after { content: ""; display: block; clear: both }
.filter dl dt { position: absolute; top: 0; left: 0; font-weight: 700 }
.filter dl dd { padding-left: 40px }
.filter dl dd a { margin-right: 20px; margin-bottom: 10px; display: inline-block }
.filter dl dd a.on { font-weight: 700; color: #477fd2 }

SCRIPT
function SelectTag(t) {
this.child = t.child || ".sx_child",
this.over = t.over || "on",
this.all = t.all || ".all",
this.init()
}
$.extend(SelectTag.prototype, {
init: function() {
var t = this;
t._bindEvent(),
t._select()
},
_bindEvent: function() {
var t = this;
$(t.child).click(function(e) {
e.preventDefault();
var i = window.location.href,
n = $(this).attr("rel"),
r = $(this).attr("name");
$(this).hasClass(t.over) || (window.location.href = t._changeURLPar(i, r, n))
}),
$(t.all).click(function(e) {
e.preventDefault();
var i = window.location.href,
n = $(this).attr("name");
$("[name=" + n + "]").removeClass(t.over),
$(this).addClass(t.over),
window.location.href = t._delUrlPar(i, n)
})
},
_delUrlPar: function(t, e) {
var n = "";
if (t.indexOf("?") == -1) return t;
n = t.substr(t.indexOf("?") + 1);
var r = "",
a = "";
if (n.indexOf("&") != -1) {
r = n.split("&");
for (i in r) r[i].split("=")[0] != e && (a = a + r[i].split("=")[0] + "=" + r[i].split("=")[1] + "&");
return t.substr(0, t.indexOf("?")) + "?" + a.substr(0, a.length - 1)
}
return r = n.split("="),
r[0] == e ? t.substr(0, t.indexOf("?")) : t
},
_changeURLPar: function(t, e, i) {
var n = this,
r = e + "=([^&])",
a = e + "=" + i,
s = encodeURI(n._getQueryString(e));
return t.match(r) ? t = t.replace(s, i) : t.match("[?]") ? t + "&" + a: t + "?" + a
},
_getQueryString: function(t) {
var e = new RegExp("(^|&)" + t + "=([^&])(&|$)", "i"),
i = window.location.search.substr(1).match(e);
return null != i ? decodeURI(i[2]) : null
},
_select: function() {
var t = this,
e = window.location.href;
$(t.child).each(function() {
var i = $(this).attr("name") + "=" + $(this).attr("rel"),
n = new RegExp(encodeURI(i), "g");
if (n.test(e)) {
$(this).addClass(t.over);
var r = $(this).attr("name");
$("[name=" + r + "]").eq(0).removeClass(t.over)
} else $(this).removeClass(t.over)
})
}
});