<!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;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
