要求：当点击不同的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>
显示：
