<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta name="wap-font-scale" content="no"> <script src="js/flexible.js"></script> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/shopcar.css"> <style type="text/css"> .pn_1{ width: 100%; height: 2.1875rem; background: #fff; border-bottom: 0.0156rem #ddd solid; } .pn_nr1{ width: 95%; margin: 0 auto; position: relative; } .pn_nr1 span{ display: inline-block; width: 0.4062rem; height: 0.4062rem; border: 0.0156rem #ddd solid; background: #fff; -webkit-border-radius:50px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; border-radius:50px; line-height:0.8594rem; position: absolute; left: 0; top: 0.875rem; } .pn_nr1 .img1{ display: inline-block; width: 1.5625rem; height: 1.5625rem; margin: 0.3125rem; position: absolute; left: 0.4688rem; top: 0; } .pn_nr1 p{ font-size: 0.3125rem; color: #696969; position: absolute; left: 2.5938rem; top: 0.3125rem; } .pn_nr1 em{ font-size: 0.3125rem; color: #ddd; position: absolute; left: 2.5938rem; top: 0.7812rem; } .pn_nr1 s{ font-size: 0.25rem; color: #ddd; position: absolute; right: 0; top: 0.3906rem; } .pn_nr1 h6{ font-size: 0.3125rem; color: #ff2150; position: absolute; right: 0; top: 0.7812rem; } .pn_nr1 .img2{ display: inline-block; width: 0.3906rem; height: 0.3906rem; position: absolute; right: 0; top: 1.5rem; } .pn_nr1 form{ width: 1.9531rem; height: 0.625rem; background: #f7f7f7; position: absolute; left: 2.5938rem; top: 1.2812rem; text-align: center; line-height:0.625rem; } .pn_nr1 form a{ font-size: 0.1875rem; line-height: 0.625rem; } .pn_nr1 form input{ height:0.5938rem; width: 0.5625rem; line-height: 0.625rem; border: 0; outline: none; background:#f7f7f7; text-align: center; font-size: 0.1875rem; } /*pn_1 end*/ /*pn_nr2*/ .pn_2{ width: 100%; height: 2.1875rem; background: #fff; border-bottom: 0.0156rem #ddd solid; } .pn_nr2{ width: 95%; margin: 0 auto; position: relative; } .pn_nr2 span{ display: inline-block; width: 0.4062rem; height: 0.4062rem; border: 0.0156rem #ddd solid; background: #fff; -webkit-border-radius:50px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; border-radius:50px; line-height:0.8594rem; position: absolute; left: 0; top: 0.875rem; } .pn_nr2 .img1{ display: inline-block; width: 1.5625rem; height: 1.5625rem; margin: 0.3125rem; position: absolute; left: 0.4688rem; top: 0; } .pn_nr2 p{ font-size: 0.3125rem; color: #696969; position: absolute; left: 2.5938rem; top: 0.3125rem; } .pn_nr2 em{ font-size: 0.3125rem; color: #ddd; position: absolute; left: 2.5938rem; top: 0.7812rem; } .pn_nr2 s{ font-size: 0.25rem; color: #ddd; position: absolute; right: 0; top: 0.3906rem; } .pn_nr2 h6{ font-size: 0.3125rem; color: #ff2150; position: absolute; right: 0; top: 0.7812rem; } .pn_nr2 .img2{ display: inline-block; width: 0.3906rem; height: 0.3906rem; position: absolute; right: 0; top: 1.5rem; } .pn_nr2 form{ width: 1.9531rem; height: 0.625rem; background: #f7f7f7; position: absolute; left: 2.5938rem; top: 1.2812rem; text-align: center; line-height:0.625rem; } .pn_nr2 form a{ font-size: 0.1875rem; line-height: 0.625rem; } .pn_nr2 form input{ height:0.5938rem; width: 0.5625rem; line-height: 0.625rem; border: 0; outline: none; background:#f7f7f7; text-align: center; font-size: 0.1875rem; } /*span js获取*/ .active { background: red!important; } /*span js获取 end*/ /*pn_nr2 end*/ /*main end*/ </style> </head> <body> <header> <div class="header"> <a href="#"> < </a> <span>购物车<em>(5)</em></span> </div> </header> <main> <div class="items"> <div class="main-pn"> <div class="main-wg"> <span class="sure BOX"></span> <em>皇宫婚纱旗舰店  < </em> <img src="img/FKH.png"> </div> </div> <div class="pn_1 lis"> <div class="pn_nr1"> <span class="be BOX"></span> <img src="img/ERYR_03.png" class="img1"> <p>2015新款婚纱冬季新娘结婚韩版蕾...</p> <em>颜色：白色；尺码：L</em> <s>￥895</s> <h6>￥495.9</h6> <img src="img/yyyyw45y.png" class="img2"> <form> <a id="sub" href="javascript:void(0);">-</a> <input type="text" value="1" id="bookNum"> <a id="add" href="javascript:void(0);">+</a> </form> </div> </div> <div class="pn_2"> <div class="pn_nr2"> <span class="be BOX"></span> <img src="img/qweryhre_03.png" class="img1"> <p>2015新款敬酒服冬季新娘结婚韩版...</p> <em>颜色：红色；尺码：L</em> <s>￥895</s> <h6>￥298.9</h6> <img src="img/yyyyw45y.png" class="img2"> <form> <a id="sub" href="javascript:void(0);">-</a> <input type="text" value="1" id="bookNum"> <a id="add" href="javascript:void(0);">+</a> </form> </div> </div> </div> </main> <article> <div class="article"> <span class="NIM"></span> <i>全选</i> <abbr>合计: </abbr> <em>￥784.80</em> <h6>为您节省￥605.2</h6> </div> <a href="#">去结算(2)</a> </article> <footer> <a href="index.html">首页</a> <a href="#">发现</a> <a href="#">购物车</a> <a href="#">我的</a> </footer> <script type="text/javascript"> /*点击span*/ (function(){ var items = document.getElementsByClassName('items'); var sures = document.getElementsByClassName('sure'); var bes = document.getElementsByClassName('be'); var article = document.getElementsByClassName('article'); var NIM = document.getElementsByClassName("NIM")[0]; var BOX = document.getElementsByClassName("BOX"); for(var i = 0; i<sures.length; i++){ sures[i].toggle = true; } for(var i = 0; i<bes.length; i++){ bes[i].toggle2 = true; } for(var i = 0; i<BOX.length; i++){ BOX[i].toggle3 = true; } function doSelect(oDiv){ var sure = oDiv.getElementsByClassName('sure')[0]; var be = oDiv.getElementsByClassName("be"); sure.index = i; //店铺商品全选点击 sure.addEventListener("touchstart",function(){ if(this.toggle){ this.classList.add("active"); this.toggle = false; for(var i=0;i<be.length;i++){ be[i].toggle2 = false; be[i].classList.add("active"); } }else{ this.classList.remove("active"); this.toggle = true; for(var i=0;i<be.length;i++){ be[i].toggle2 = true; be[i].classList.remove("active"); } } }); //店铺商品单选点击 for(var i = 0; i<be.length; i++){ be[i].addEventListener("touchstart",function(){ var be_arr = []; if(this.toggle2){ this.toggle2 = false; this.classList.add("active"); }else{ this.toggle2 = true; this.classList.remove("active"); } for(var i = 0; i<be.length; i++){ be_arr[i] = ""+be[i].toggle2; } if(be_arr.indexOf("true")<0){ sure.toggle = false; sure.classList.add("active"); }else{ sure.toggle = true; sure.classList.remove("active"); } }); } //点击全选店铺的商品 NIM.toggle = true; NIM.addEventListener("touchstart",function(){ if(this.toggle){ for(var i = 0; i< BOX.length; i++){ BOX[i].classList.add("active") } this.classList.add("active"); this.toggle = false; }else{ for(var i = 0; i< BOX.length; i++){ BOX[i].classList.remove("active"); } this.classList.remove("active"); this.toggle = true; } }) } for(var i = 0; i< items.length; i++){ doSelect(items[i]); } }()); </script> <script src="js/jquery.min-3.0.js"></script> <script src="js/shopcar.js"></script> </body> </html> </body> </html>