摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>點(diǎn)擊選中菜單后的效果</title> <style> * {margin: 0px auto;paddin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>點(diǎn)擊選中菜單后的效果</title>
<style>
* {margin: 0px auto;padding: 0px;}
button {outline: none;}
.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;}
.main {width: 400px;height: 400px;border: 1px solid red;/*border-top: 0px;*/}
p {width: 400px;height: 26px;margin-top:10px;/*border: 1px solid red;*/}
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;}
button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}
button:hover {cursor: pointer;}
.shopCar {width: 200px;/*height: 400px;*/border: 1px solid red;position: absolute;top: 50px;right: -200px;}
li {width: 200px;height: 26px;line-height: 26px;/*border: 1px solid red;*/margin: 5px auto;text-align: center;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background: white;}
h4 {width:100%;text-align: center;}
.check{
width: 88px;
height: 24px;
line-height: 24px;
border: 2px solid red;
color: red;
}
.change {width:200px;height:220px;border:1px solid red;background: yellow;}
.sc {width: 30px;height: 20px;font-size: 10px;position: relative;top:25px;right:0px;float: right;}
</style>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="top">請(qǐng)選擇信息后加入購(gòu)物車(chē)</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">ONE 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;">套餐類(lèi)型</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">2GB</span>
<span id="sp10" class="ru" name="0">3GB</span>
<span id="sp11" class="ru" name="0">4GB</span>
</p>
<p class="p5">
<b style="border:0px;">機(jī)身內(nèi)存</b>
<span id="sp12" class="me" name="0">16GB</span>
<span id="sp13" class="me" name="0">32GB</span>
<span id="sp14" class="me" name="0">64GB</span>
</p>
<p class="p6">
<b style="border:0px;">產(chǎn)地</b>
<span id="sp15" class="ad" name="0">中國(guó)大陸</span>
<span id="sp16" class="ad" name="0">港澳臺(tái)</span>
</p>
<p class="p7">
<b style="border:0px;">價(jià)格</b>
<span id="sp17" class="ad" name="0">999元搶購(gòu)</span>
</p>
<p class="p8">
<b style="border:0px;">數(shù)量</b>
<input type="text" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1">加入購(gòu)物車(chē)</button>
<button class="bu2">打開(kāi)購(gòu)物車(chē)</button>
</p>
</div>
<div class="shopCar">
<li style="font-size:14px;background: #C40000;color: white;">您所選商品信息如下：</li>
<div class="sright">
</div>
<div class="kong" style="background:#ccc;width:100%;height:7px;display:none"></div>
<button class="bu3" style="width:80px;height:35px;margin-left:20px;">隱藏購(gòu)物車(chē)</button>
<button class="bu4" style="width:80px;">清空購(gòu)物車(chē)</button>
</div>
<script type="text/javascript">
$(function(){
$('span').on('click',function(){
if($(this).hasClass('check')){
$(this).removeClass('check');
}else{
// siblings 選擇除了自身外的兄弟節(jié)點(diǎn)
//console.log($(this).siblings());
$(this).addClass('check').siblings().removeClass('check')
//也可以先刪除父類(lèi)下所有span標(biāo)簽的類(lèi)名,然后再對(duì)自己的進(jìn)行添加
//$(this).parent().find('span').removeClass('check')
//$(this).addClass("check")
}
})
})
</script>
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2019-02-11 09:45:18
老師總結(jié)：效果比較簡(jiǎn)單,但是在布局中使用頻率較高,要好好掌握