这篇博客介绍了如何使用JavaScript实现单选和多选功能。在特定场景下，如‘全部’、‘推荐资产’、‘热点资产’、‘最新资产’以及‘综合’、‘订购数’、‘评价数’、‘浏览数’之间，只允许选择一个选项。通过JavaScript代码，可以实现这样的互斥选择效果，并展示了最终的实现成果。
这是实现的是只可以点击一个
$(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" οnclick="query();">综合</a></li>
<li><a class="classification-btn" id="order" οnclick="order();"><img src="${ctx}/comstyle/images/arr.png">订购数</a></li>
<li><a class="classification-btn" id="speak" οnclick="speak();"><img src="${ctx}/comstyle/images/arr.png">评价数</a></li>
<li><a class="classification-btn" id="read" οnclick="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" οnclick="query();">全部</a></li>
<li><a class="classification-btn " οnclick="recom();">推荐资产</a></li>
<li><a class="classification-btn" οnclick="hot();">热点资产</a></li>
<li><a class="classification-btn" οnclick="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+"' οnclick='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+"' οnclick='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+"' οnclick='zcbq(this);'>"+zcbq[i].attrvalue+"</a></li>");
}
});页面是采用动态从静态数据中读取的方式来实现的。
这样子实现的效果如下所示：
ok，完成了！！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
