摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點(diǎn)擊選中商品效果</title> <script src="http://code.jque
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點(diǎn)擊選中商品效果</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
.top{width: 400px;height: 35px;line-height: 35px;text-align: center;margin-top: 50px;border: 1px solid red;
border-bottom: 0px;background: #c40000;color: white;margin-left: 20px;}
.main{width: 400px;height: 400px;border: 1px solid red;margin-left: 20px;}
p{width: 400px;height: 26px;margin-top: 10px;}
b{width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color: #838383;
border: 1px solid #ccc;display: block;float: left;margin-left: 5px;}
span{width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color: #838383;
border: 1px solid #ccc;display: block;float: left;margin-left: 5px;}
span:hover{cursor: pointer;}
.check{width: 88px;height: 24px;line-height: 24px;border: 2px solid red;color: red;}
</style>
<script>
$(function(){
$('span').click(function(){
if($(this).hasClass('check')){
$(this).removeClass('check');
}else{
$(this).addClass('check').siblings('span').removeClass('check');
}
});
});
</script>
</head>
<body>
<div class="top">請(qǐng)選擇信息后加入購(gòu)物車</div>
<div class="main">
<p class="p1">
<b style="border: 0px;">版本</b>
<span id="sp0" class="ed" name="0">ONE A2001</span>
<span id="sp1" class="ed" name="0">OWE A0001</span>
<span id="sp2" class="ed" name="0">ONE A1001</span>
</p>
<p class="p2">
<b style="border: 0px;">機(jī)身顏色</b>
<span id="sp3" class="co" name="0">白色</span>
<span id="sp4" class="co" name="0">黑色</span>
<span id="sp5" class="co" name="0">金色</span>
</p>
<p class="p3">
<b style="border: 0px;">套餐類型</b>
<span id="sp6" class="pa" name="0">標(biāo)配</span>
<span id="sp7" class="pa" name="0">套餐一</span>
<span id="sp8" class="pa" name="0">套餐二</span>
</p>
<p class="p4">
<b style="border: 0px;">運(yùn)行內(nèi)存</b>
<span id="sp9" class="ru" name="0">4GB</span>
<span id="sp10" class="ru" name="0">6GB</span>
<span id="sp11" class="ru" name="0">8GB</span>
</p>
<p class="p5">
<b style="border: 0px;">機(jī)身內(nèi)存</b>
<span id="sp12" class="me" name="0">32GB</span>
<span id="sp13" class="me" name="0">64GB</span>
<span id="sp14" class="me" name="0">128GB</span>
</p>
</div>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-05-27 09:33:11
老師總結(jié)：<b style="border: 0px;">機(jī)身內(nèi)存</b>
以后, 凡是遇到數(shù)值為0的情況 下, 不要更加單位了