您的位置:首页 > Web前端 > CSS

条件选择css

2015-10-27 14:22 573 查看
效果图:



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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: