不同tab下的列表长度不同，tab的样式和底部的位置不同

要求：当点击不同的tab时，被点击的tab样式不同，产生不同的列表。当列表长度大于屏幕高度时，底部随列表显示；当列表长度小于屏幕高度时，底部固定在屏幕的底部。

demo:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
    <script src="./zepto.js"></script>
    <style>
        body, div, p, ol, li, ul {
            margin: 0;
            padding: 0;
            font-style: normal;
        }

        html, body {
            width: 100%;
            /* 避免动画等撑开窗口 */
            overflow-x: hidden;
        }

        .head {
            width: 100%;
            padding: 10px;
            background: #f4f4f4;
            text-align: center;
        }

        .tab {
            display: -webkit-box;
        }

        .tab-item {
            -webkit-box-flex: 1;
            padding: 10px;
            background: #ccc;
            text-align: center;
        }

        .click-tab {
            color: #f00;
            border-bottom: 1px solid #f00;
        }

        .cont {
            display: none;
        }

        .foot {
            position: absolute;
            visibility: hidden;
            width: 100%;
            bottom: 0;
            padding: 10px;
            background: #f4f4f4;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="head">
    This is head.
</div>
<div class="tab">
    <div class="tab-item click-tab">1111</div>
    <div class="tab-item">2222</div>
    <div class="tab-item">3333</div>
</div>
<div>
    <div class="cont cont0" style='display:block;'>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla<br/><br/>
        fdkjafdsla1<br/><br/>
    </div>
    <div class="cont cont1">
        222222222222222222222222<br/>
        222222222222<br/>
    </div>
    <div class="cont cont2">
        33
    </div>
</div>
<div class="foot">This is foot.</div>
<script>
    var body = $('body');
    var bodyH = body.height();
    var clientH = $(window).height();
    var foot = $('.foot');
    var footH = foot.height();

    body.css({
        'minHeight': clientH - footH,
        'position': 'relative',
        'paddingBottom': footH

    });
    foot.css({
        'visibility': 'visible'
    });

    var tabItem = $('.tab-item');
    tabItem.click(function () {
        var me = $(this);
        var index = me.index();
        me.siblings().removeClass('click-tab');
        me.addClass('click-tab');
        $('.cont').hide();
        $('.cont' + index).show();
    });
</script>
</body>
</html>

显示：

     

posted @ 2015-11-02 15:01  瑞way  阅读(762)  评论(1)  编辑  收藏  举报