要求：当点击不同的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="http://m.baidu.com/static/search/3600/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>
显示：
时间： 2024-08-26 13:38:39