不同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="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-10-27 05:35:01

不同tab下的列表长度不同,tab的样式和底部的位置不同的相关文章

tab下拉菜单

这个想法早就有的 (写tab下拉菜单)就觉得自己对js不是很熟   所以一直没有写 花了不少时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>tab下拉菜单</title> <style type="text/css"> *{padding: 0px;margin: 0px;text-decoration

厦门海关贸易通APP新闻滑动tab下拉刷新bug解决

在厦门海关贸易贸易通APP一期接近收尾阶段,发现一个bug:滑动tab下拉刷新页面,当新闻listView滑下来时,再往下滑,无法上滑,而是直接刷新的bug,如下图. 解决: 在adapter.activity.fragment三个文件多处打log后将问题锁定在 ViewPagerFragment 中的checkCanDoRefresh()的最后return返回值始终为true.针对性打log发现getFirstVIsiblposition和getChildAt(0).getTop(),这个两个

@清晰掉 各种类型32位与64位下各类型长度对比

64 位的优点:64 位的应用程序可以直接访问 4EB 的内存和文件大小最大达到4 EB(2 的 63 次幂):可以访问大型数据库.本文介绍的是64位下C语言开发程序注意事项. 1. 32 位和 64 位C数据类型 32和64位C语言内置数据类型,如下表所示: 上表中第一行的大写字母和数字含义如下所示:I表示:int类型L表示:long类型P表示:pointer指针类型32表示:32位系统64表示64位系统如:LP64表示,在64位系统下的long类型和pointer类型长度为64位.64位Li

获取列表中某一个文件夹下的列表项集合(不包含子文件夹对象,也不包含子文件夹中的列表项)

RT,方法如下: 1 SPListItemCollection GetSubItemsWithoutFoldersInParrentFolder(SPFolder parrent) 2 { 3 SPList list = parrent.Item.ParentList; 4 SPQuery query = new SPQuery(); 5 query.Folder = parrent; 6 query.Query = "<Where><Eq><FieldRef Na

DIVCSS5模块 上标题下简介列表DIV CSS布局

类似上下结构的上标题下简介列表DIV CSS布局实例模块 大标题+简单简介列表模块CSS布局,布局讲解.图文+代码介绍,在线演示,打包下载该模块完整源代码. 上标题下简介上下结构列表CSS布局效果截图 布局这样的模块,标题一般只占一行,标题文字过多自动换行的文字将自动隐藏处理,简介内容字数控制来显示最多两排,通常上海早泄治疗医院程序员会考虑调用最多多少个文字字数. 一.DIVCSS模块布局分析   -   TOP 从局部模块分析很容易找到规律,每列都是标题+简介方式布局,下边出现下边框线效果.找

《Python CookBook2》 第四章 Python技巧 - 若列表中某元素存在则返回之 &amp;&amp; 在无须共享引用的条件下创建列表的列表

若列表中某元素存在则返回之 任务: 你有一个列表L,还有一个索引号i,若i是有效索引时,返回L[i],若不是,则返回默认值v 解决方案: 列表支持双向索引,所以i可以为负数 >>> def list_get(L,i,v=None): if -len(L)<= i < len(L): return L[i] else: return v >>> list_get([1,2,3,4,5,6],3) 4 异常机制 >>> def list2_ge

很好用的Tab标签切换功能,延迟Tab切换。

一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊,其实你不这样做,也无伤大雅,但是作为前端的工程师,我们可以为用户做到更好.想想如果一个网页上,有很多标签,而用户鼠标在不经意间快速的滑动了一下,如果tab标签的切换不经过特殊的处理的话,标签所对应的内容会一同切换,甚至还会想服务器请求内容,增加服务器开销,很显然这一行为不是用户想要的,我们完全可以

Mysql下在某一列后即表的某一位置添加新列的sql语句

Mysql简介 MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司.MySQL被广泛地应用在Internet上的中小型网站中.由于其体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库.  Mysql ALTER TABLE详细语法 ALTER TABLE用于更改原有表的结构.例如,您可以增加或删减列,创建或取消索引,更改原有列的类型,或重新命名列或表.您还可以更改表的评注和表的类型.ww

利用反射的原理来自定义Tab 下划线indicator的长度

public class SetIndicator { public static void setIndicator(Context context, TabLayout tabs, int leftDip, int rightDip) { Class<?> tabLayout = tabs.getClass(); Field tabStrip = null; try { tabStrip = tabLayout.getDeclaredField("mTabStrip")