顺解淘宝ued前端小测试

zbm2001

浏览: 15803 次
性别:
来自: 北京

最近访客更多访客>>

asdnew

woodding2008

xiumoo

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (9)

社区版块

存档分类

PHP HTML

http://ued.taobao.com/sts/join_us.php
路过，前端有题，正好得闲，写解温故：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>鞋色选项</title>
<style>
#shoesColorGroup label{
position:relative;
overflow:hidden;
display:inline-block;
cursor:pointer;
border:5px solid #fff;
width:100px;
height:100px;
background:url(shoes-color-sprite.png);
/*text-indent:-32767px; 为测试观察效果，临时注释掉*/
}
#shoesColorGroup .label-choose-checked{
border:5px solid #f00;
}
#shoesColorGroup .label-choose-checked::before{
content:"√";
position:absolute;
right:1px;
bottom:1px;
padding:2px;
background-color:#f00;
font-size:10px;
font-weight:bold;
text-indent:0;
color:#fff;
}
#shoesColorGroup #brown_label{
background-color:brown;
background-position:0 0;
}
#shoesColorGroup #darkkhaki_label{
background-color:darkkhaki;
background-position:-100px 0;
}
#shoesColorGroup #fuchsia_label{
background-color:fuchsia;
background-position:-200px 0;
}
#shoesColorGroup #brown_label.label-choose-checked{
background-position:0 -100px;
}
#shoesColorGroup #darkkhaki_label.label-choose-checked{
background-position:-100px;
}
#shoesColorGroup #fuchsia_label.label-choose-checked{
background-position:-200px -100px;
}
</style>
<script src="zCool.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="shoesColorGroup">
    <label for="brown" id="brown_label">
      <input type="radio" name="shoesColor" id="brown">
      咖啡色</label>
    <label for="darkkhaki" id="darkkhaki_label">
      <input type="radio" name="shoesColor" id="darkkhaki">
      暗黄色</label>
    <label for="fuchsia" id="fuchsia_label">
      <input type="radio" name="shoesColor" id="fuchsia">
      紫红色</label>
</div>
</form>
<script>

$(function(){

// 为单选按钮确定被包含的<label/>标签，并设置样式类
function setChooseLabelClass(radio){
$(radio).
ancestor('label')
[ radio.checked ? 'addClass' : 'removeClass' ]
('label-choose-checked');
};

// 确定选项组的根元素
$('#shoesColorGroup').
// 委托注册事件
click(function(e){
if( $.match(e.target, 'input[type=radio]') ){
$(this).
find('input[type=radio]', setChooseLabelClass);
}
});

});
</script>
</body>
</html>