商品规格选择案列
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
a{text-decoration: none}
.ware_sp_list{clear: both;}
.sp_color{clear: both;/* height: 27rem;*/ padding-bottom: 1rem; overflow: auto;}
.sp_color h2{height:3.2rem; line-height: 3.2rem; font-size: 1.3rem; color: #6e6e6e; padding: 0.3rem 0 0 1.6rem; }
.sp_color_bnt a{display: block; height: 2.7rem; line-height: 2.7rem; font-size: 1.0rem; text-align: center; float: left; border-radius: 0.25rem; margin: 0 0 0.5rem 1.6rem; }
.sp_color_bnt .have{ border: 1px solid #c1c2c4; color: #000; }
.sp_color_bnt .no{ background: #dbdbdb; border: 1px solid #9baab5; color: #fff; cursor: default;}
.sp_color_bnt .small{padding: 0.2rem 0.8rem;}
.gmtc .sp_color_bnt .center{width: 15.8rem;}
.gmtc .sp_color_bnt .big{width: 24.5rem;}
.sp_color_bnt .select{ background: #f0514b; border-color: #f0514b; color: #fff;}
</style>
<script>
var _w = document.documentElement.clientWidth || document.body.clientWidth,
_h = document.documentElement.clientHeight || document.body.clientHeight;
pageW = 750;
document.documentElement.style.fontSize = _w/pageW*20+"px";
</script>
<body>
<div class="sp_color" id="sp_color_jrgwc">
<div class="ware_sp_list">
<h2>颜色</h2>
<div class="sp_color_bnt clearfix" id="sp_color_bnt_0">
<a class="have small" href="javascript:">白色</a>
<a class="have small" href="javascript:">绿色</a>
<a class="have small" href="javascript:">红色</a>
</div>
</div>
<div class="ware_sp_list">
<h2>尺码</h2>
<div class="sp_color_bnt clearfix" id="sp_color_bnt_1">
<a class="have small" href="javascript:">100cm</a>
<a class="have small" href="javascript:">200cm</a>
<a class="have small" href="javascript:">300cm</a>
</div>
</div>
<div class="ware_sp_list">
<h2>分辨率</h2>
<div class="sp_color_bnt clearfix" id="sp_color_bnt_2">
<a class="have small" href="javascript:">高清(3000*3000)</a>
<a class="have small" href="javascript:">高清(2000*2000)</a>
<a class="have small" href="javascript:">普通(1000*1000)</a>
</div>
</div>
</div>
<script src="http://ossweb-img.qq.com/images/js/zepto/zepto.min.js"></script>
<script>
var gx = [
[ [5,6], [3,4], [5,7] ],
[ [1], [1], [0,2] ],
[ [0], [2], [] ]
];
$("#sp_color_jrgwc a").click(function(){
//灰色的按钮不能被点击
if(this.className.indexOf("no") != -1){return;}
//获取当前点击按钮的关系列表
var arr = gx[ $(this).parent().parent().index() ][ $(this).index() ];
//选中
if (this.className.indexOf("select") == -1)
{
//如果某行中，已经有一个按钮被选中了，则需要清除
var alist = $(this).parent().parent().find("a");
for(var i=0; i<alist.length; i++)
{
var a = alist[i];
if (a.className.indexOf("select") != -1)
{
$(a).removeClass("select");
var noa = gx[ $(a).parent().parent().index() ][ $(a).index() ];
for(var i in noa){
$("#sp_color_jrgwc a").eq(noa[i]).removeClass("no");
}
}
}
$(this).addClass("select");
for(var i=0; i<arr.length; i++)
{
var a = $("#sp_color_jrgwc a").eq(arr[i]).get(0);
a.className = a.className + " no";
$(a).removeClass("select");
}
}
//取消选中
else
{
$(this).removeClass("select");
for(var i in arr){
$("#sp_color_jrgwc a").eq(arr[i]).removeClass("no");
}
}
});
</script>
</body>
</html>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
