购物车点击选中

Original 2018-11-16 16:08:08 264
abstract:<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>手风琴</title>   <link rel="stylesheet&q
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>手风琴</title>
  <link rel="stylesheet" href="static/css/style6.css">
  <link rel="stylesheet" href="static/css/animate.min.css">
  <link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
  <script type="text/javascript" src="static/js/jquery.js"></script>
  <style>
    .box{width: 300px;height:400px;border:1px solid #ff6700;margin: 0 auto;}
    .box h2{color: #fff;background: #ff6700;margin:0;padding: 0;font-size: 14px;line-height: 40px;text-align: center;}
    .box p{padding:0;font-size: 12px;color:#666;height: 24px;line-height: 24px;margin:10px 0;}
    .box p b{padding: 0 5px;width: 65px;display: inline-block;text-align: center;}
    .box p input{width: 64px;height: 22px;}
    .box p.specail span{border:none;}
    .box p span{width:66px;border:1px solid #ccc;margin-right: 5px;display: inline-block;text-align: center;}
    div button{border: none;background: #ff6700;color: #fff;width: 100px;height: 30px;}
    .flex{display: flex;justify-content: center; align-content: center;}
    .left{margin-right: 10px;}
    .box p span.check{
      border:1px solid #ff6700;color:#ff6700;
    }
  </style>
</head>
<body>

<div>
    <h2>请选择信息后加入购物车</h2>
    <p><b>版本</b> <span>XXXX1</span><span>XXXX2</span><span>XXXX3</span></p>
    <p><b>机身颜色</b> <span>白色</span><span>黑色</span><span>金色</span></p>
    <p><b>套餐内容</b> <span>标配</span><span>套餐1</span><span>套餐2</span></p>
    <p><b>运行内存</b> <span>2g</span><span>4g</span><span>6g</span></p>
    <p><b>机身内存</b> <span>16g</span><span>32g</span><span>64g</span></p>
    <p><b>产地</b> <span>大陆</span><span>港澳台</span></p>
    <p><b>价格</b> <span>999</span></p>
    <p><b>数量</b> <span><input type="text" value="1"></span></p>
    
    <div>
      <button>加入购物车</button>
      <button>打开购物车</button>
    </div>

</div>

<script type="text/javascript">

  $("span").click(function(){
    if($(this).hasClass('check')){
      $(this).removeClass('check')
    }else{
      $(this).addClass('check').siblings('span').removeClass('check');
    }
  })
</script>


</body>
</html>

8.png

Correcting teacher:韦小宝Correction time:2018-11-16 16:36:37
Teacher's summary:厉害啊!代码写的很完整!就是缺少了自己的总结!下次记得补上啊!!

Release Notes

Popular Entries