abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击选中菜单后的效果</title> <style> * {margin: 0px auto;paddin
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击选中菜单后的效果</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">请选择信息后加入购物车</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;">机身颜色</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">标配</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;">运行内存</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;">机身内存</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;">产地</b> <span id="sp15" class="ad" name="0">中国大陆</span> <span id="sp16" class="ad" name="0">港澳台</span> </p> <p class="p7"> <b style="border:0px;">价格</b> <span id="sp17" class="ad" name="0">999元抢购</span> </p> <p class="p8"> <b style="border:0px;">数量</b> <input type="text" value="1" style="width:40px;height:26px;"> </p> <p style="margin-top:30px;margin-left:95px;"> <button class="bu1">加入购物车</button> <button class="bu2">打开购物车</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;">隐藏购物车</button> <button class="bu4" style="width:80px;">清空购物车</button> </div> <script type="text/javascript"> $(function(){ $('span').on('click',function(){ if($(this).hasClass('check')){ $(this).removeClass('check'); }else{ // siblings 选择除了自身外的兄弟节点 //console.log($(this).siblings()); $(this).addClass('check').siblings().removeClass('check') //也可以先删除父类下所有span标签的类名,然后再对自己的进行添加 //$(this).parent().find('span').removeClass('check') //$(this).addClass("check") } }) }) </script> </body> </html>
Correcting teacher:灭绝师太Correction time:2019-02-11 09:45:18
Teacher's summary:效果比较简单,但是在布局中使用频率较高,要好好掌握