完成仿天猫点击选中商品属性效果

abstract：<!DOCTYPE html> <html> <link rel="stylesheet" href="./static/css/style.css"> <script type="text/javascript" src ="

<!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的效果不一样.因此往后注意这等细节，把类样式写得更规范

Correcting teacher：查无此人Correction time：2019-03-25 09:31:50
Teacher's summary：完成的不错。用jq写，肯定比js容易吧。继续加油。

完成仿天猫点击选中商品属性效果

Popular Entries