qq_35832126 2016-08-09 10:02 采纳率: 0%
浏览 1022

怎么添加3个规格 如 数量 颜色 规格 

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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>
<title>jquery仿淘宝规格颜色选择效果</title>
<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>
  • 写回答

2条回答

  • threenewbee 2016-08-09 11:18
    关注

    http://www.xwcms.net/js/bddm/87935.html

    评论

报告相同问题？

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候，驱动要重新装才能使用，怎么解决？
  • ¥15 让node服务器有自动加载文件的功能