abstrait：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>點(diǎn)擊選中商品</title> <link rel="stylesheet" type="text/css&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>點(diǎn)擊選中商品</title>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="static/images/icon.ico" />
<link rel="stylesheet" type="text/css" href="static/style3.css">
<script type="text/javascript" src="static/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('span').click(function(){
if($(this).hasClass('check')){
$(this).removeClass('check')
}else{
$(this).addClass('check').siblings('span').removeClass('check')
}
})
})
</script>
</head>
<body>
<div class="checkbox">
<div class="checkbox-top">請選擇信息后加入購物車</div>
<div class="checkbox-content">
<div class="content1" style="margin-top: 10px;">
<div class="content1_header">版本</div>
<span class="content1_info">ONE A0002</span>
<span class="content1_info">ONE A1002</span>
<span class="content1_info">ONE A2002</span>
</div>
<div class="content1">
<div class="content1_header">機(jī)身顏色</div>
<span class="content1_info">白色</span>
<span class="content1_info">黑色</span>
<span class="content1_info">金色</span>
</div>
<div class="content1">
<div class="content1_header">套餐類型</div>
<span class="content1_info">標(biāo)配</span>
<span class="content1_info">套餐一</span>
<span class="content1_info">套餐二</span>
</div>
<div class="content1">
<div class="content1_header">運(yùn)行內(nèi)存</div>
<span class="content1_info">2GB</span>
<span class="content1_info">3GB</span>
<span class="content1_info">4GB</span>
</div>
<div class="content1">
<div class="content1_header">機(jī)身內(nèi)存</div>
<span class="content1_info">16GB</span>
<span class="content1_info">32GB</span>
<span class="content1_info">64GB</span>
</div>
<div class="content1">
<div class="content1_header">產(chǎn)地</div>
<span class="content1_info">中國大陸</span>
<span class="content1_info">港澳臺(tái)</span>
</div>
<div class="content1">
<div class="content1_header">價(jià)格</div>
<span class="content1_info">999元搶購</span>
</div>
<div class="content1">
<div class="content1_header">數(shù)量</div>
<div class="content1_connet">1</div>
</div>
</div>
<div class="checkbox-footer">
<div class="footer-but">加入購物車</div>
<div class="footer-but">打開購物車</div>
</div>
</div>
</body>
</html>*{margin: 0px;padding: 0px;}
.checkbox{width: 400px;border:1px solid #CB1F1F;margin: 0px auto;margin-top: 50px;}
.checkbox-top{width: 400px;height:40px;color: #fff;text-align: center;line-height: 40px;background: #CB1F1F;font-size: 16px;}
.checkbox-content{width: 400px;}
.content1{width: 400px;height: 35px;}
.content1_header{width: 100px;height: 25px;line-height: 25px;text-align: center;float: left;font-size: 12px;color: #898181;font-weight: 600;}
span{width: 87px;height: 25px;line-height: 25px;text-align: center;float: left;font-size: 12px;border:1px solid #898181;margin-right: 10px;color: #898181;cursor: pointer;}
.content1_connet{border:1px solid #898181;float: left;width: 50px;height: 30px;line-height: 30px;}
.checkbox-footer{width: 250px;height: 30px;margin-left: 100px;margin-bottom: 40px;margin-top: 20px;}
.footer-but{width: 110px;background:#CB1F1F;color: #fff;display: inline-block;height: 30px;line-height: 30px;text-align: center; font-size:14px;cursor: pointer;}
.check{
width: 85px;
height: 23px;
list-style: 23px;
border: 2px solid red;
color: red;
}通過jquery判斷元素中的class是否存在check來實(shí)現(xiàn)點(diǎn)擊選中效果，本章復(fù)習(xí)了hasClass()判斷是否存在check，removeClass() check存在清除，siblings()匹配除自己以外的兄弟元素
Professeur correcteur：滅絕師太Temps de correction：2018-12-28 09:36:36
Résumé du professeur：完成的很棒，分解的很清晰，繼續(xù)加油奧！選中效果在布局中比較常用到