????：<!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>仿天貓點(diǎn)擊選中商品效果</title>
</head>
<body>
<div>
<h3>請(qǐng)選擇信息后加入購(gòu)物車</h3>
<p><b>版本</b><span>ONE A2001</span><span>ONE A0001</span><span>ONE A1001</span></p>
<p><b>機(jī)身顏色</b><span>白色</span><span>黑色</span><span>金色</span></p>
<p><b>套餐類型</b><span>標(biāo)配</span><span>套餐一</span><span>套餐二</span></p>
<p><b>運(yùn)行內(nèi)存</b><span>2GB</span><span>3GB</span><span>4GB</span></p>
<p><b>機(jī)身內(nèi)存</b><span>16GB</span><span>32GB</span><span>64GB</span></p>
<p><b>產(chǎn)地</b><span>中國(guó)大陸</span><span>港澳臺(tái)</span></p>
<p><b>價(jià)格</b><span>999元搶購(gòu)</span></p>
<p><b>數(shù)量</b><input type="text"></p>
<p style="text-align:center;margin-top:30px;"><a href="">加入購(gòu)物車</a><a href="">打開購(gòu)物車</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;
}
完成本章對(duì)JQ 的遍歷方法重新溫習(xí)，過(guò)程中遇到一個(gè)小問(wèn)題就是給點(diǎn)擊新樣式類名為active 在CSS中寫成 .menu .active 和.active的效果不一樣.因此往后注意這等細(xì)節(jié)，把類樣式寫得更規(guī)范
?? ???：查無(wú)此人?? ??：2019-03-25 09:31:50
???? ??：完成的不錯(cuò)。用jq寫，肯定比js容易吧。繼續(xù)加油。