完成仿天猫点击选中商品属性效果
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./static/css/style.css">
<script type="text/javascript" src ="./static/js/jquery.js"></script>
<head>
<meta charset="UTF-8">
<title>仿天猫点击选中商品效果</title>
</head>
<body>
<div>
<h3>请选择信息后加入购物车</h3>
<p><b>版本</b><span>ONE A2001</span><span>ONE A0001</span><span>ONE A1001</span></p>
<p><b>机身颜色</b><span>白色</span><span>黑色</span><span>金色</span></p>
<p><b>套餐类型</b><span>标配</span><span>套餐一</span><span>套餐二</span></p>
<p><b>运行内存</b><span>2GB</span><span>3GB</span><span>4GB</span></p>
<p><b>机身内存</b><span>16GB</span><span>32GB</span><span>64GB</span></p>
<p><b>产地</b><span>中国大陆</span><span>港澳台</span></p>
<p><b>价格</b><span>999元抢购</span></p>
<p><b>数量</b><input type="text"></p>
<p style="text-align:center;margin-top:30px;"><a href="">加入购物车</a><a href="">打开购物车</a></p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('.menu span').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
}else{
$(this).siblings('span').removeClass('active')
$(this).addClass('active')
}
})
})
</script>
</html>*{
margin: 0px;
padding: 0px;
}
.menu{
margin:50px auto;
border:1px solid red;
width: 400px;
height: 400px;
}
.menu>h3{
color: #fff;
background: #C40000;
text-align: center;
font-weight: 100;
font-size: 16px;
height: 30px;
line-height: 30px;
}
.menu>p{
margin-left: 30px;
color: #838383;
margin-top: 10px;
}
.menu>p b{
font-size: 12px;
width: 80px;
text-align: center;
display: inline-block;
}
.menu .active{
border:2px solid #C40000;
color:#000;
width: 78px;
height: 23px;
line-height: 23px;
}
.menu>p span{
cursor: pointer;
border:1px solid #838383;
margin-left: 5px;
font-size: 11px;
width: 80px;
height: 25px;
line-height: 25px;
display: inline-block;
text-align: center;
}
.menu>p input{
width: 50px;
padding: 3px 0px;
text-align: center;
margin-left: 5px;
}
.menu>p a{
color: #fff;
background: #C40000;
text-decoration: none;
margin-right: 20px;
font-size: 12px;
padding:10px 20px;
margin-top: 50px;
}
完成本章对JQ 的遍历方法重新温习，过程中遇到一个小问题就是给点击新样式类名为active 在CSS中写成 .menu .active 和.active的效果不一样.因此往后注意这等细节，把类样式写得更规范