微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

jquery仿淘宝规格颜色选择效果

发布时间:2020-11-16 来源:未知 点击:
  <!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>


这就是微学网-程序员之家为你提供的"jquery仿淘宝规格颜色选择效果"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14071.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧,手机游戏下载站