条件选择css

效果图:

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SAP最佳业务实践

从SAP最佳业务实践看企业管理(50)-SD-铺货与结算

铺货与结算: (1)市区零售客户 家的全面上货 (2)餐饮娱乐场所 客户之全面铺货 (3)重点学校区域的全系列加 家客户 (4)市区居民 家客户的全系列铺...

36030
来自专栏Data Analysis & Viz

百年百图の中国(1900-1999):另类python爬虫和PIL拼图

标题有点长,也有点怪。前半部分文艺向,后半部分python技术向。目的就是用PIL库得到100张图的拼图(成果图见文末)。

9520
来自专栏牛客网

19届前端实习生面经

18000
来自专栏ml

学编程,学单词.....在学习中积累自己的单词(不断更新__ing)

可以去肆意大话天下,可以去小民一般的言语,但是一定要清楚,知识的积累,至于心中,即便你说这粗俗的话,你的个性,气质依旧在那,比如北大的那啥教师(心中的典范),也...

31250
来自专栏睿哥杂货铺

我的2017年度盘点

https://www.gitbook.com/book/riboseyim/linux-perf-master/details

22480
来自专栏阿尔法go

爬虫系列(1)-----python爬取猫眼电影top100榜

对于Python初学者来说,爬虫技能是应该是最好入门,也是最能够有让自己有成就感的,今天在整理代码时,整理了一下之前自己学习爬虫的一些代码,今天先上一个简单的例...

54080
来自专栏一场梦

亲属关系称谓查询html源码

16650
来自专栏coding

AOC显示器提示OSD锁定怎么办?

macpro虽好,但屏幕实在太小了,而且原生的键盘敲起来很费劲,还是用机械键盘噼里啪啦敲打显得爽快。于是,给macpro外接了键鼠以及27寸的AOC显示器。

2.4K40
来自专栏生信技能树

【直播】我的基因组 44:比对文件画profile和heatmap图

就在昨天,一篇羞羞嗒的推送在各个群里炸开了锅。氮素,大家都是小清新啊 今天还是给大家规(wu)规(liao)矩(tou)矩(ding)讲一下比对文件怎样画pro...

34270
来自专栏阮一峰的网络日志

解剖CPU

你有没有想过,切开CPU看看里面? 有一个瑞典Lund大学的物理学博士生,就真的这么干了,还把照片放到网上。我们知道,CPU里面是几千万到几亿个晶体管,他的目标...

470100

扫码关注云+社区

领取腾讯云代金券