购物车点击选中
李铁蛋2018-11-16 16:08:08277<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<link rel="stylesheet" href="static/css/style6.css">
<link rel="stylesheet" href="static/css/animate.min.css">
<link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
<script type="text/javascript" src="static/js/jquery.js"></script>
<style>
.box{width: 300px;height:400px;border:1px solid #ff6700;margin: 0 auto;}
.box h2{color: #fff;background: #ff6700;margin:0;padding: 0;font-size: 14px;line-height: 40px;text-align: center;}
.box p{padding:0;font-size: 12px;color:#666;height: 24px;line-height: 24px;margin:10px 0;}
.box p b{padding: 0 5px;width: 65px;display: inline-block;text-align: center;}
.box p input{width: 64px;height: 22px;}
.box p.specail span{border:none;}
.box p span{width:66px;border:1px solid #ccc;margin-right: 5px;display: inline-block;text-align: center;}
div button{border: none;background: #ff6700;color: #fff;width: 100px;height: 30px;}
.flex{display: flex;justify-content: center; align-content: center;}
.left{margin-right: 10px;}
.box p span.check{
border:1px solid #ff6700;color:#ff6700;
}
</style>
</head>
<body>
<div>
<h2>请选择信息后加入购物车</h2>
<p><b>版本</b> <span>XXXX1</span><span>XXXX2</span><span>XXXX3</span></p>
<p><b>机身颜色</b> <span>白色</span><span>黑色</span><span>金色</span></p>
<p><b>套餐内容</b> <span>标配</span><span>套餐1</span><span>套餐2</span></p>
<p><b>运行内存</b> <span>2g</span><span>4g</span><span>6g</span></p>
<p><b>机身内存</b> <span>16g</span><span>32g</span><span>64g</span></p>
<p><b>产地</b> <span>大陆</span><span>港澳台</span></p>
<p><b>价格</b> <span>999</span></p>
<p><b>数量</b> <span><input type="text" value="1"></span></p>
<div>
<button>加入购物车</button>
<button>打开购物车</button>
</div>
</div>
<script type="text/javascript">
$("span").click(function(){
if($(this).hasClass('check')){
$(this).removeClass('check')
}else{
$(this).addClass('check').siblings('span').removeClass('check');
}
})
</script>
</body>
</html>