传递点击的筛选项的值到url

最新推荐文章于 2020-10-16 17:04:16 发布

暖宝宝兰宝宝

最新推荐文章于 2020-10-16 17:04:16 发布

阅读量459

点赞数

本文链接：https://blog.csdn.net/u011313703/article/details/50379402

版权

比赛.html?content=2&mode=1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<style type="text/css">
.siftbox{padding:10px 0 10px 36px;background:#F2F2F2;border-bottom:solid 1px #CCCCCC;}
#filter{width:940px;margin-bottom:20px;}
.siftbox .label{float:left;margin-top:2px;font-size:14px;font-weight:800;color:#000;}
.siftbox #condition{float:left;}
.siftbox .inbtn,.siftbox .inbtn span{background:red;cursor:pointer;}
.siftbox .inbtn{display:inline-block;height:17px;line-height:17px;overflow:hidden;margin:4px 8px 0 0;float:left;background-position:0 0;padding:0 0 0 20px;}
.siftbox .inbtn span{background-position:100% 0;display:block;float:left;padding:0 5px 0 0;}
.siftbox .inbtn:hover{background-position:0 -17px;text-decoration:none;}
.siftbox .inbtn:hover span{background-position:100% -17px;color:#5e5e5e;text-decoration:none;}
.sortbox{border-width:2px 1px 0px 1px;border-color:#ff5500 #cccccc #cccccc #cccccc;border-style:solid;width:940px;margin:20px auto 0 auto;}
.sortbox dl{padding:0 0 15px 110px;border-bottom:solid 1px #cccccc;vertical-align:bottom;}
.sortbox dl dt{float:left;width:110px;margin:15px 0 0 -110px;text-align:right;line-height:16px;display:inline;font-weight:800;font-size:14px;color:#404040;}
.sortbox dl dd{float:left;margin:12px 18px 0 0;display:inline;}
.sortbox dl dd a{cursor:pointer;white-space:nowrap;}
.sortbox dl dd a.seling{background-color:#005AA0;color:#FFFFFF;}
.sortbox dl dd a.seled{background-color:#005AA0;color:#FFFFFF;}

</style>
</head>

<body>
<div class="sortbox">
<div class="siftbox clearfix">
<span class="label">已选条件:</span>
<div id="condition"></div>
</div>
<div id="filter">
<dl class="clearfix">
<dt id="mode">比赛模式：</dt>
<dd><div><a data="0">所有</a></div></dd>
<dd><div><a data="1">常规比赛</a></div></dd>
<dd><div><a data="2">合作比赛</a></div></dd>
</dl>
<dl class="clearfix">
<dt id="state">比赛状态：</dt>
<dd><div><a data="0">所有</a></div></dd>
<dd><div><a data="1">报名中</a></div></dd>
<dd><div><a data="2">比赛中</a></div></dd>
<dd><div><a data="3">已结束</a></div></dd>
</dl>
<dl class="clearfix">
<dt id="content">比赛内容：</dt>
<dd><div><a data="0">所有</a></div></dd>
<dd><div><a data="1">股票下</a></div></dd>
<dd><div><a data="2">基金</a></div></dd>
<dd><div><a data="3">股指期货</a></div></dd>
<dd><div><a data="4">商品期货</a></div></dd>
</dl>
<dl class="clearfix">
<dt id="nature">比赛性质：</dt>
<dd><div><a data="0">所有</a></div></dd>
<dd><div><a data="1">邀请赛</a></div></dd>
<dd><div><a data="2">公开赛</a></div></dd>
</dl>
</div>
<script type="text/javascript">
var abc = [];
$(function(){
//选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。
$("#filter a").hover(function(){
$(this).addClass("seling");
},function(){
$(this).removeClass("seling");
});

//选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
$("#filter dt+dd a").attr("class", "seled"); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)，
不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/

//为filter下的所有a标签添加单击事件
$("#filter").find("dl").each(function(index, element) {
var id=$(this).find("dt").attr("id");
$(this).find("a").click(function(){
var linsUrl=$(this).attr("data");
GETURL(id,linsUrl)
$(this).parents("dl").children("dd").each(function(){
$(this).children("div").children("a").removeClass("seled");
});

$(this).attr("class", "seled");
var needhide = $(this);
needhide.parentsUntil("dl").parent().hide();
abc.push(needhide);
var val = $(this).html().replace(/ /g, "kongge");
var condition = '<a οnclick=deleteC("'+val+'") class="inbtn pzbtn" rel="'+$(this).html()+'"><span>'+$(this).html()+'</span></a>';
$("#condition").append(condition);
})
});
});

var paraArr = window.location.search.replace("?","").split("&");

function deleteC(v){
if(window.location.href.indexOf('&'+v) > 0){
var url = window.location.href.replace("&"+v,"");
} else if(window.location.href.indexOf(v+'&') > 0) {
var url = window.location.href.replace(v+"&","");
} else {
var url = window.location.href.replace(v,"");
}
location.href = url
}
function GETURL(name,value){
var url = '';
if(window.location.href.indexOf('?') > 0 && window.location.search.indexOf('?') >= 0){
url = window.location.pathname+window.location.search+"&"+name+"="+value;
}else{
url = window.location.pathname+"?"+name+"="+value;
}
location.href = url;
}

for(var p = 0; p <paraArr.length;p++) {
var parent = $("#"+paraArr[p].substring(0,paraArr[p].indexOf("="))+"").parents("dl");
parent.hide();
abc.push(parent);
var val = parent.find("a").eq(paraArr[p].substring(paraArr[p].indexOf("=")+1)).html().replace(/ /g, "kongge");
var condition = '<a οnclick=deleteC("'+paraArr[p]+'") class="inbtn pzbtn" rel="'+val+'"><span>'+val+'</span></a>';
$("#condition").append(condition);
}
</script>
</body>
</html>