如何添加3个规格仿淘宝规格颜色选择效果 如 尺寸 颜色 规格
日期:2020-05-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery仿淘宝规格颜色选择效果</title> </head> <body> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style> dl{zoom:1;overflow:hidden} dt,li{float:left;list-style:none;margin-left:10px;line-height:50px} dt a,li a{display:block;text-align:center;border:solid 1px #666;width:50px;height:50px;line-height:50px} li a.disabled{color:#aaa;border:dotted 1px #aaa;cursor:default} li a.selected{border:solid 3px red;height:46px;width:46px;line-height:46px} </style> <div> <dl> <dt>尺寸:</dt> <dd> <ul id="size"> <li><a href="javascript:;" title="S">S</a></li> <li><a href="javascript:;" title="M">M</a></li> <li><a href="javascript:;" title="L">L</a></li> <li><a href="javascript:;" title="XS" >XS</a></li> </ul> </dd> </dl> <dl> <dt>颜色:</dt> <dd> <ul id="color"> <li><a href="javascript:;" title="黑色">黑色</a></li> <li><a href="javascript:;" title="白色" >白色</a></li> <li><a href="javascript:;" title="红色" >红色</a></li> <li><a href="javascript:;" title="黄色" >黄色</a></li> <li><a href="javascript:;" title="蓝色" >蓝色</a></li> </ul> </dd> </dl> </div> <script> $('#size a,#color a').click(function () { var a = $(this), isSize = a.closest('ul').attr('id') == 'size'; if (a.hasClass('disabled') || a.hasClass('selected')) return false; $('#size a,#color a').removeClass('disabled'); $(isSize ? '#size a' : '#color a').removeClass('selected'); a.addClass('selected'); var s = ',' + (Rules[a.attr('title')] || []).join() + ','; //获取规则 $(isSize ? '#color a' : '#size a').each(function(){ if (s.indexOf(',' + this.title + ',') != -1) $(this).removeClass('selected').addClass('disabled'); }); }); //建立尺寸和颜色的排除值数组 var Rules = { M: ['黑色'], L: ['红色', '蓝色'], XS: ['黄色'], 黑色: ['XS'], 白色: ['S', 'M','XS','L'], 红色: ['M'] } </script> </body> </html>
本文原创地址:https://www.ecshopok.com/article-626.html
版权所有 © 转载时必须以链接形式注明出处!
觉得本文对您有用,想收藏下来!方法很简单:请点击-〉
我们一直坚持白天工作、晚上熬夜更新资源,付出了巨大的精力和时间,其中的辛酸难以言述。
下一篇:域名跳转页面/域名更换倒计时跳转HTML源码/个性化域名跳转中转页【安全防封技术】 上一篇:实现PHP批量检测网站是否能够正常打开方法
暂无评论,来发表一个吧