js实现多选与单选

这是实现的是只可以点击一个

$(function () {
		    $('#conditions li:first-child a').addClass('active')
		    $('#conditions li a').click(function () {
		        $(this).addClass('active');
		        $(this).parent().siblings().find('a').removeClass('active');
		    });
		});
		
		$(function () {
		    $('#recommendtype li:first-child a').addClass('active');
		    $('#recommendtype li a').click(function () {
		        $(this).addClass('active');
		        $(this).parent().siblings().find('a').removeClass('active');
		    });
		});

 <ul class="classification" id='conditions'>
        <li><a class="classification-btn active" id="zonghe" onclick="query();">综合</a></li>
        <li><a class="classification-btn" id="order" onclick="order();"><img src="${ctx}/comstyle/images/arr.png">订购数</a></li>
        <li><a class="classification-btn" id="speak" onclick="speak();"><img src="${ctx}/comstyle/images/arr.png">评价数</a></li>
        <li><a class="classification-btn" id="read" onclick="read();"><img src="${ctx}/comstyle/images/arr.png">浏览数</a></li>
        <div class="clearBox"></div>
 </ul>

 <ul class="classification" id="recommendtype">
            <li><a class="classification-btn" onclick="query();">全部</a></li>
            <li><a class="classification-btn " onclick="recom();">推荐资产</a></li>
            <li><a  class="classification-btn" onclick="hot();">热点资产</a></li>
            <li><a  class="classification-btn" onclick="newinfo();">最新资产</a></li>
            <div class="clearBox"></div>
 </ul>

全部 与推荐资产  热点资产  最新资产之间的关系是只可以选择一个，同样，综合 与订购数 评价数  浏览数之间的关系也是只可以选择一个。

选择多个的情况：

function zcxl(data){
			  if(data.className.search("active")==-1){
				  $(data).addClass("active"); 
			  }else{
				  $(data).removeClass("active"); 
			  } 
			  type();
		  }
		  function zcdl(data){
			  if(data.className.search("active")==-1){
				  $(data).addClass("active"); 
			  }else{
				  $(data).removeClass("active"); 
			  } 
			  type();
		  }
		  function zcbq(data){
			 for(var y=0;y<$("#zcbqul li").length.length;y++){
				  var classname=$("#zcbqul li")[y].children[0].className;
				  if(classname.search("active")==11){
					  $("#zcbqul li")[y].children[0].removeClass("active");
				  }
			  } 
			  if(data.className.search("active")==-1){
				  $(data).addClass("active"); 
			  }else{

				  $(data).removeClass("active"); 
			  } 
			  type();
		  }
		  
		  function type(){
			  if($('#recommendtype li a')[0].className.indexOf('active')!=-1){
				  $('#pagerdiv').empty();
				  
				  var zcdl= new Array();
				  for(var r=0;r<$("#zcdlul li .active").length;r++){
					  zcdl[r]=$("#zcdlul li .active")[r].name;
				  }
				  var satype="";
				  for(var a=0;a<zcdl.length;a++){
					  if(zcdl[a]==''){  
					  }else{
						  satype+=zcdl[a]+','; 
					  }  
				  }
				  console.log(satype);
				  var zcxl = new Array();
				  for(var e=0;e<$("#zcxlul li .active").length;e++){
					  zcxl[e]=$("#zcxlul li .active")[e].name;
				  }
				  var sasubtype="";
				  for(var b=0;b<zcxl.length;b++){
					  if(zcxl[b]==''){
					  }else{
						  sasubtype+=zcxl[b]+",";
					  }
				  }
				  var zcbq = new Array();
				  for(var f=0;f<$("#zcbqul li .active").length;f++){
					  zcbq[f]=$("#zcbqul li .active")[f].name;
				  }
				  var salabel="";
				  for(var c=0;c<zcbq.length;c++){
					  if(zcbq[c]==''){
					  }else{
						  salabel+=zcbq[c]+",";
					  }
				  }
				  
				  
				  
				  var j=1;
					$('#page div').empty();
					for(var i=0;i<j;i++){
						
						$("#page").prepend("<div id='"+i+"'></div>");
						var options={
								"url":"${ctx}/finedo/saartifactory/query", 
								beforesend:function(){
								 	finedo.message.showwaiting();	
								},
								ajax:false,
								queryparams:{
									"salabel" :salabel,
									"satype"  : satype,
									"sasubtype":sasubtype,
									"keyword":$("#keyword").val()
								},
								success:function(data){
									htmlcontent(data);
									finedo.message.hidewaiting();
								},
								pagesize : 8,
								pagelist: [8, 24, 48, 100],
						};
						finedo.getpager(i,options).load();
						
					} 
			  }
			  if($('#recommendtype li a')[1].className.indexOf('active')!=-1){
				  
			  }
			  if($('#recommendtype li a')[2].className.indexOf('active')!=-1){
				  $('#pagerdiv').empty();
				  var zcdl= new Array();
				  for(var r=0;r<$("#zcdlul li .active").length;r++){
					  zcdl[r]=$("#zcdlul li .active")[r].name;
				  }
				  var satype="";
				  for(var a=0;a<zcdl.length;a++){
					  if(zcdl[a]==''){  
					  }else{
						  satype+=zcdl[a]+','; 
					  }  
				  }
				  console.log(satype);
				  var zcxl = new Array();
				  for(var e=0;e<$("#zcxlul li .active").length;e++){
					  zcxl[e]=$("#zcxlul li .active")[e].name;
				  }
				  var sasubtype="";
				  for(var b=0;b<zcxl.length;b++){
					  if(zcxl[b]==''){
					  }else{
						  sasubtype+=zcxl[b]+",";
					  }
				  }
				  var zcbq = new Array();
				  for(var f=0;f<$("#zcbqul li .active").length;f++){
					  zcbq[f]=$("#zcbqul li .active")[f].name;
				  }
				  var salabel="";
				  for(var c=0;c<zcbq.length;c++){
					  if(zcbq[c]==''){
					  }else{
						  salabel+=zcbq[c]+",";
					  }
				  }
				  var j=1;
					$('#page div').empty();
					for(var i=0;i<j;i++){
						$("#page").prepend("<div id='"+i+"'></div>");
						var options={
								"url":"${ctx}/finedo/saartifactory/queryhot", 
								beforesend:function(){
								 	finedo.message.showwaiting();	
								},
								ajax:false,
								queryparams:{
									"salabel" :salabel,
									"satype"  : satype,
									"sasubtype":sasubtype,
									"keyword":$("#keyword").val()
								},
								success:function(data){
									htmlcontent(data);
									finedo.message.hidewaiting();
								},
								pagesize : 8,
								pagelist: [8, 24, 48, 100],
						};
						finedo.getpager(i,options).load();
						
					}
			  }
			  if($('#recommendtype li a')[3].className.indexOf('active')!=-1){
				  
			  }
			  
			  
		  }

对应的页面展示：

//消费者门户首页显示
		$(document).ready(function () {
			query(); 
			var zcdl=JSON.parse('${STATICDATA_KEY.资产大类}');
			var zcxl=JSON.parse('${STATICDATA_KEY.资产小类}');
			var zcbq=JSON.parse('${STATICDATA_KEY.资产标签}');
			for(var i=0;i<zcdl.length;i++){
				$("#zcdl").after("<li><a class='key-btn dl' name='"+zcdl[i].attrvalue+"' onclick='zcdl(this);'>"+zcdl[i].attrvalue+"</a></li>");
		    } 
			for(var i=0;i<zcxl.length;i++){
				$("#zcxl").after("<li><a class='key-btn xl' name='"+zcxl[i].attrvalue+"' onclick='zcxl(this);'>"+zcxl[i].attrvalue+"</a></li>");
				
		    }
			for(var i=0;i<zcbq.length;i++){
				$("#zcbq").after("<li><a class='key-btn dl' name='"+zcbq[i].attrvalue+"' onclick='zcbq(this);'>"+zcbq[i].attrvalue+"</a></li>");
		    }
		});

页面是采用动态从静态数据中读取的方式来实现的。

这样子实现的效果如下所示：

ok，完成了！！！