效果图:
1. CSS
<style>
.select_row{ float:left;width:100%; height:22px; margin-bottom:5px}
.select_row a{height:auto; display:block;font-size:13px; text-align:center}
.col_blue{color:#06c}
.select_condition{ width:80px; float:left; height:24px; text-align:center; font-size:13px}
.bg_color_blue{ background-color:#AFDBF7}
</style>
2.JS
<script type="text/javascript">
$(function() {
var evaluateTime="${evaluateTime?default('')}";
var commodityType="${commodityType?default('')}";
var auditStatus="${auditStatus?default('')}";
if(commodityType==""){
commodityType="全部"
}
$(".time li a").each(function(){
if($(this).text()==evaluateTime){
$(this).addClass("bg_color_blue").removeClass("col_blue");
}
});
$(".type li a").each(function(){
if($(this).text()==commodityType){
$(this).addClass("bg_color_blue").removeClass("col_blue");
}
});
$(".status li a").each(function(){
if($(this).text()==auditStatus){
$(this).addClass("bg_color_blue").removeClass("col_blue");
}
});
})
</script>
3.FTL
<div class="select_row time">
<div class="select_condition">
评价时间:
</div>
<ul >
<li class="col-xs-1 list-inline">
<a href="javascript:queryByTime('本日')" class="col_blue">本日</a>
</li>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByTime('本周')" class="col_blue">本周</a>
</li>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByTime('上周以前')" class="col_blue">上周以前</a>
</li>
</ul>
</div>
<div class="select_row type">
<div class="select_condition">
商品类型:
</div>
<ul>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByType('')" class="col_blue">全部</a>
</li>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByType('新车')" class="col_blue">新车</a>
</li>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByType('二手车')" class="col_blue">二手车</a>
</li>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByType('保养')" class="col_blue">保养</a>
</li>
</ul>
</div>
<div class="select_row status">
<div class="select_condition">
是否审核:
</div>
<ul>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByStatus('已审核')" class="col_blue">已审核</a>
</li>
<li class="col-xs-1 list-inline">
<a href="javascript:queryByStatus('未审核')" class="col_blue">未审核</a>
</li>
</ul>
</div>
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有