<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js"></script>
<title>条件筛选</title>
</head>
<body>
<div class="cont">
<div class="sx">
<span>地区：</span>
<a href="javascript:;" data-id="0">全部</a>
<a href="javascript:;" data-id="1">华北</a>
<a href="javascript:;" data-id="2">西北</a>
<a href="javascript:;" data-id="3">东北</a>
<a href="javascript:;" data-id="4">华东</a>
<a href="javascript:;" data-id="5">华中</a>
<a href="javascript:;" data-id="6">华南</a>
</div>
<div class="sx">
<span>类型：</span>
<a href="javascript:;" data-id="7">全部</a>
<a href="javascript:;" data-id="8">购物中心</a>
<a href="javascript:;" data-id="9">商业街</a>
<a href="javascript:;" data-id="10">社区配套</a>
<a href="javascript:;" data-id="11">百货</a>
</div>
<div class="sx">
<span>面积：</span>
<a href="javascript:;" data-id="12">全部</a>
<a href="javascript:;" data-id="13">5万平米以下</a>
<a href="javascript:;" data-id="14">5-10万平米</a>
<a href="javascript:;" data-id="15">10-20万平米</a>
<a href="javascript:;" data-id="16">20万平米以上</a>
</div>
<div class="sx">
<span>状态：</span>
<a href="javascript:;" data-id="17">全部</a>
<a href="javascript:;" data-id="18">已开业</a>
<a href="javascript:;" data-id="19">部分开业</a>
<a href="javascript:;" data-id="20">未开业</a>
</div>
</div>
<div class="cont">
<h1 class="sx_text"></h1>
</div>
<script src="js/index.js"></script>
</body>
</html>
*{
padding: 0;
list-style: none;
font-family: '微软雅黑';
margin: 0;
}
a{
color:#333;
text-decoration: none;
}
.cont{
width:1200px;
margin: 0 auto;
display: table;
}
.sx{
width:100%;
padding:10px 0px;
}
.sx>a{
padding:5px 10px;
font-size: 14px;
}
.sx_check{
background: midnightblue;
color:#fff;
}
.sx_text{
font-weight:400;
margin-top: 50px;
}//a标签的单击事件，改变背景颜色
$('.sx>a').click(function(event){
$(this).parents('div').children('a').removeClass('sx_check');
$(this).addClass('sx_check');
$('.sx_text').html(fe())
})
//遍历所有a标签，根据a标签的className不同来获取用户选中的类型
function fe() {
var result = ""//记录返回的条件
for(var i=0;i<$('.sx_check').length;i++){
result += $('.sx_check').eq(i).text() + ' ';
}
return result;
}
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
