前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >条件选择css

条件选择css

作者头像
week
发布2018-08-27 10:24:48
4580
发布2018-08-27 10:24:48
举报
文章被收录于专栏:用户画像用户画像

效果图:

1. CSS

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年10月27日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档