JQuery手机端预约时间段选择

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012260672/article/details/50594924
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时间表选择</title>
    <style>
    body,ul,li{margin:0;padding:0;}
    li{list-style:none;}

    .box{width:500px;margin:0 auto;border:3px solid #f00;font-family:'Microsoft YaHei';}
    .sjb li{margin-top:20px;}
    .sjb span{display:inline-block;border-top:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:4px 10px;color:#666;cursor:pointer;}
    .sjb span:first-child{border-left:1px solid #ddd;}
    .sjb .disabled{color:#ddd}
    .sjb .red-bg{background:#f00;border-top:1px solid #f00;border-right:1px solid #f00;border-bottom:1px solid #f00;color:#fff;}
    .sjb span:first-child.td_red{border-left:1px solid #f00;}

    .xz{width:100%;height:200px;border:1px solid #0f0;margin-top:30px;line-height:30px;}
    .xz span{color:#f00;}

    </style>
</head>
<body>
    <div class="box">
        <ul class="sjb">
            <li><span class="disabled">00:00~01:00</span><span>01:00~02:00</span><span>02:00~03:00</span><span>03:00~04:00</span></li>
            <li><span>04:00~05:00</span><span>05:00~06:00</span><span>06:00~07:00</span><span>07:00~08:00</span></li>
            <li><span>08:00~09:00</span><span>09:00~10:00</span><span>10:00~11:00</span><span>11:00~12:00</span></li>
            <li><span>12:00~13:00</span><span>13:00~14:00</span><span>14:00~15:00</span><span>15:00~16:00</span></li>
            <li><span>16:00~17:00</span><span>17:00~18:00</span><span>18:00~19:00</span><span>19:00~20:00</span></li>
            <li><span>20:00~21:00</span><span>21:00~22:00</span><span>22:00~23:00</span><span>23:00~24:00</span></li>
        </ul>
        <div class="xz">
            <p>您的选择:</p>
            <p id="tdNumShow">您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择您的选择</p>
        </div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $(".sjb li").find("span:not(.disabled)").click( function () {
            var tdNum = $(this).text();
            if ($(this).is('.red-bg')){
                $(this).removeClass("red-bg");
                //$("#tdNumShow span").hide();
                $('#tdNumShow span:contains("' + tdNum +'")').hide();
            }else{
                $(this).addClass("red-bg");
                $("#tdNumShow").append("<span>&nbsp;"+tdNum+"</span>");
            }
        });
    });
    </script>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页