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');
		    });
		});

 

        
综合
        
订购数
        
评价数
        
浏览数
        

 

 

            
全部
            
推荐资产
            
热点资产
            
最新资产
            

 

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

选择多个的情况：

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

"); 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

"); 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[i].attrvalue+"");
		    } 
			for(var i=0;i"+zcxl[i].attrvalue+"");
				
		    }
			for(var i=0;i"+zcbq[i].attrvalue+"");
		    }
		});

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

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

ok，完成了！！！