SUI Mobile 标签页

assessmentReport.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>考核报表</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">
    <link rel="stylesheet" href="../css/assessmentReport.css">
  </head>
  <body>
        <div class="time-nav">
            <div class="row no-gutter border-radious">
                <div class="col-25">
                    <button class="border first" id="today">
                            <span class="time-span">今天</span>
                        </button>
                </div>
                <div class="col-25">
                    <button class="border" id="day3">
                            <span class="time-span">近三天</span>
                        </button>
                </div>
                <div class="col-25">
                    <button class="border" id="day7">
                            <span class="time-span">近一周</span>
                        </button>
                </div>
                <div class="col-25">
                    <button class="border" id="day30">
                                <span class="time-span">近一个月</span>
                        </button>
                </div>
        </div>
        </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/assessmentReport.js'></script>
  </body>
</html>

assessmentReport.css

html{
    font-size: 20px;
}
.time-nav{
    width: 90%;
    margin: 0.5rem auto 0 auto;
}
.border{
    width: 100%;
    border: 1px solid #0894ec;
    color: #0894ec;
    text-decoration: none;
    text-align: center;
    display: block;
    line-height: 1.25rem;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: none;
    padding: 0 0.5rem;
    margin: 0;
    height: 1.35rem;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    float: left;
}
.border-radious>:first-child>:first-child{
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.border-radious>:last-child>:first-child{
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.first{
    background-color: #0894ec;
    color: #fff;
}

assessmentReport.js

$("button").each(function(index){
       $(this).click(function(){ 
       $("button").removeClass("first");
       $("button").eq(index).addClass("first");
       });
   });
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值