collect.html 2.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1023063_7fxauzqx2h8.css">
    <script src="js/base.js" type="text/javascript"></script>
    <title>收纳箱</title>

    <style>
        .searchead{
            display:flex;
            align-items: center;
            /*justify-content: space-between;*/
            border-bottom: 1px solid #f5f5f5;
        }
        .searchimg{
            width:0.38rem;
            height:0.36rem;
            font-size: 0;
            margin-left: 1.75rem;
        }
        .searchimg img{
            width:100%;
            height:100%;
        }
        .searchname{
            color:#333333;
            font-size: 0.3rem;
            margin-left: 1.28rem;
        }
        .collectitem{
            width:6.86rem;
            height:0.86rem;
            background:rgba(255,255,255,1);
            box-shadow:0px 5px 12px 0px rgba(143,143,143,0.1);
            border-radius:0.1rem;
            margin: 0.2rem auto 0;
            font-size: 0.3rem;
            color:#333333;
            font-weight: bold;
            display:flex;
            align-items: center;
            padding: 0 0.44rem;
            box-sizing: border-box;
        }
        .collectname{
            margin-left: 0.2rem;
        }
        .icon-xiaoqing-tubiao-weixuanze{
            font-size: 0.4rem;
            color:#2C82E6
        }
        .icon-danxuanxuanzhong{
            font-size: 0.4rem;
            color:#2C82E6
        }
    </style>
</head>
<body>
<div>
    <div class="searchead">
        <p class="searchimg">
            <img src="img/dsfsdasfwq@2x.png" alt="">
        </p>
        <p class="searchname">搜索</p>
    </div>

    <div class="collectlist">
        <div class="collectitem">
            <p class="iconfont icon-xiaoqing-tubiao-weixuanze selectcollet"></p>
            <p class="collectname">看看</p>
        </div>
        <div class="collectitem">
            <p class="iconfont icon-xiaoqing-tubiao-weixuanze selectcollet"></p>
            <p class="collectname">看看</p>
        </div>
        <div class="collectitem ">
            <p class="iconfont icon-xiaoqing-tubiao-weixuanze selectcollet"></p>
            <p class="collectname">看看</p>
        </div>
    </div>
</div>
</body>

<script src="js/jquery.min.js"></script>
<script>
    $(".selectcollet").click(function(){

        $(this).addClass("icon-danxuanxuanzhong");
        $(this).removeClass("icon-xiaoqing-tubiao-weixuanze");

        $(this).parents(".collectitem").siblings(".collectitem").children(".iconfont").removeClass("icon-danxuanxuanzhong");
        $(this).parents(".collectitem").siblings(".collectitem").children(".iconfont").addClass("icon-xiaoqing-tubiao-weixuanze");
        window.location.href='addschedule.html'
    })
</script>
</html>