实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <style> /* 系统边框清零 */ *{margin: 0; padding: 0;} /* 最外层div框 */ .shop{ width: 400px; height: 450px; margin: 30px auto; border: 1px solid red; } /* top区样式 */ .top{ width: 100%; height: 45px; background:#C40000; /* 字体居中,并调整颜色 */ line-height: 45px; text-align: center; color: white; font-size: 1.1rem; } /* 调整高度,并浮动 */ .content p{ height: 20px; line-height: 20px; margin: 18px 10px; } /* b标签样式 */ b{ float: left; width: 60px; margin-left: 15px; color: #838383; font-size: 13px; text-align: center; } /* span标签样式 */ span{ display: inline-block; width: 80px; height: 20px; border: 1px solid #ccc; font-size: 12px; color: #838383; text-align: center; margin-left: 10px; } input{ margin-left: 10px; } .bu1{ width:120px; height: 40px; background-color: #C40000; border-style: none; color: white } .select{ border:2px solid #C40000; width: 88px; height: 24px; line-height: 24px; color: red; } button:hover {cursor: pointer;} span:hover {cursor: pointer;}</style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <link rel="stylesheet" href="css/shop-2.css"> </head> <body> <!-- 购物车整体 --> <div class="shop"> <!-- 购物车头部 --> <div class="top"> <p>请选择信息后加入购物车</p> </div> <!-- 购物车内容 --> <div class="content"> <!-- 版本 --> <p class="item" name='varsion'> <b class="notice">版本</b> <span>A2001</span> <span>A2002</span> <span>A2003</span> </p> <!-- 机身颜色 --> <p class="item" name='color'> <b class="notice">机身颜色</b> <span>白色</span> <span>黑色</span> <span>金色</span> </p> <!-- 套餐类型 --> <p class="item" name='type'> <b class="notice">套餐类型</b> <span>标配版</span> <span>套餐一</span> <span>套餐二</span> </p> <!-- 运行内存 --> <p class="item" name='ram'> <b class="notice">运行内存</b> <span>2GB</span> <span>3GB</span> <span>4GB</span> </p> <!-- 机身内存 --> <p class="item" name='rom'> <b class="notice">机身内存</b> <span>16GB</span> <span>32GB</span> <span>64GB</span> </p> <!-- 产地 --> <p class="item" name='location'> <b class="notice">产地</b> <span>中国大陆</span> <span>港澳台</span> </p> <!-- 价格 --> <p class="item" name='price'> <b class="notice">价格</b> <span>999元抢购</span> </p> <!-- 数量--> <p class="item" name='num'> <b class="notice">数量</b> <!-- 添加input框 --> <input type="number" value="1" style="width:40px;height:26px;"> </p> <p style="margin-top:30px;margin-left:95px;"> <button class="bu1" id='sub'>加入购物车</button> </p> </div> </div> <!-- jQuery函数 --> <script> $(function(){ $('span').click(function(){ // 检测是否已经添加select样式 if($(this).hasClass('select')){ // 返回值为真,则删除select样式 $(this).removeClass('select'); }else{ // 为假时则添加select样式,并检测同层级span标签是否被选中,如果被选中则删除其样式 $(this).addClass('select').siblings('span').removeClass('select') } }) }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例