话不多说，直接上代码，不会的自己测试，删除添加，一步一步的操作，多看几次就看懂了，当然了，需要引入jQuery，自己下载
HTML
<div class="filter">
<div class="container">
<div class="box">
<div class="title-h">按条件筛选</div>
<dl>
<dt>教学方式</dt>
<dd>
<a href="#" rel="" name="mode" class="all on">不限</a>
<a href="#" rel="自学" name="mode" class="sx_child">自学</a>
<a href="#" rel="教学" name="mode" class="sx_child">教学</a>
</dd>
</dl>
<dl>
<dt>年龄</dt>
<dd>
<a href="#" rel="" name="stage" class="all on">不限</a>
<a href="#" rel="0-10岁" name="stage" class="sx_child">0-10岁</a>
<a href="#" rel="10-20岁" name="stage" class="sx_child">10-20岁</a>
<a href="#" rel="20-30岁" name="stage" class="sx_child">20-30岁</a>
<a href="#" rel="30-40岁" name="stage" class="sx_child">30-40岁</a>
<a href="#" rel="40-50岁" name="stage" class="sx_child">40-50岁</a>
<a href="#" rel="50岁-60岁" name="stage" class="sx_child">50-60岁</a>
<a href="#" rel="60岁及以上" name="stage" class="sx_child">60岁及以上</a>
</dd>
</dl>
<dl>
<dt>所属行业</dt>
<dd>
<a href="#" rel="" name="sector" class="all on">不想</a>
<a href="#" rel="汽车" name="sector" class="sx_child">汽车</a>
<a href="#" rel="大健康" name="sector" class="sx_child">大健康</a>
<a href="#" rel="节能环保" name="sector" class="sx_child">节能环保</a>
<a href="#" rel="智能信息" name="sector" class="sx_child">智能信息</a>
<a href="#" rel="文化旅游" name="sector" class="sx_child">文化旅游</a>
<a href="#" rel="新材料" name="sector" class="sx_child">新材料</a>
<a href="#" rel="高端装备" name="sector" class="sx_child">高端装备</a>
<a href="#" rel="其他行业" name="sector" class="sx_child">其他行业</a>
</dd>
</dl>
<dl>
<dt>所属地域</dt>
<dd>
<a href="#" rel="" name="board" class="all on">不限</a>
<a href="#" rel="东北" name="board" class="sx_child">东北</a>
<a href="#" rel="华东" name="board" class="sx_child">华东</a>
<a href="#" rel="华北" name="board" class="sx_child">华北</a>
<a href="#" rel="华中" name="board" class="sx_child">华中</a>
<a href="#" rel="华南" name="board" class="sx_child">华南</a>
<a href="#" rel="西南" name="board" class="sx_child">西南</a>
<a href="#" rel="西北" name="board" class="sx_child">西北</a>
</dd>
</dl>
<dl>
<dt>工资区间</dt>
<dd>
<a href="#" rel="" name="area" class="all on">不限</a>
<a href="#" rel="3000以下" name="area" class="sx_child">3000以下</a>
<a href="#" rel="3000-5000" name="area" class="sx_child">3000-5000</a>
<a href="#" rel="5000-8000" name="area" class="sx_child">5000-8000</a>
<a href="#" rel="8000-10000" name="area" class="sx_child">8000-10000</a>
<a href="#" rel="1-1.5万" name="area" class="sx_child">1-1.5万</a>
<a href="#" rel="1.5万以上" name="area" class="sx_child">1.5万以上</a>
</dd>
</dl>
<dl>
<dt>发布时间</dt>
<dd>
<a href="#" rel="" name="date" class="all on">全部</a>
<a href="#" rel="最近一天" name="date" class="sx_child">最近一天</a>
<a href="#" rel="最近三天" name="date" class="sx_child">最近三天</a>
<a href="#" rel="最近一周" name="date" class="sx_child">最近一周</a>
<a href="#" rel="最近两周" name="date" class="sx_child">最近两周</a>
</dd>
</dl>
</div>
</div>
</div>
<script>
$(function(){
new SelectTag({
child : ".sx_child", //所有筛选范围内的子类
over : 'on', //选中状态样式名称
all : ".all"
});
})
</script>
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)
})
}
});
网友评论