abstrait：<!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>標(biāo)配</span><span>套餐一</span><span>套餐二</span></p>
<p><b>運行內(nèi)存</b><span>2GB</span><span>3GB</span><span>4GB</span></p>
<p><b>機身內(nèi)存</b><span>16GB</span><span>32GB</span><span>64GB</span></p>
<p><b>產(chǎn)地</b><span>中國大陸</span><span>港澳臺</span></p>
<p><b>價格</b><span>999元搶購</span></p>
<p><b>數(shù)量</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 的遍歷方法重新溫習(xí)，過程中遇到一個小問題就是給點擊新樣式類名為active 在CSS中寫成 .menu .active 和.active的效果不一樣.因此往后注意這等細節(jié)，把類樣式寫得更規(guī)范
Professeur correcteur：查無此人Temps de correction：2019-03-25 09:31:50
Résumé du professeur：完成的不錯。用jq寫，肯定比js容易吧。繼續(xù)加油。