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

            padding:;

            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:;

            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:;

            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>

显示：

     

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

  1. 从后端到前端之Vue（四）小试牛刀——真实项目的应用（树、tab、数据列表和分页）

    学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式.还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的方式,然后在尝试工程化的方式. 现在先实现功 ...

  2. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. tab下拉菜单

    这个想法早就有的 (写tab下拉菜单)就觉得自己对js不是很熟   所以一直没有写 花了不少时间 <!DOCTYPE html> <html> <head> < ...

  4. tab下图表展示宽高为0的问题

    tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...

  5. Python核心编程--学习笔记--6--序列（下）列表、元组

    11 列表 类似于C语言的数组,但是列表可以包含不同类型的任意对象.列表是可变类型. 创建列表——手动赋值.工厂函数: >>> aList = [12, 'abc'] >> ...

  6. easyui中Tab的tools按钮刷新当前tab

    easyui中Tab的tools按钮刷新当前tab 点击刷新按钮,刷新当前Tab选项卡. $('#index_tabs').tabs({ fit : true, border : false, too ...

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

    若列表中某元素存在则返回之 任务: 你有一个列表L,还有一个索引号i,若i是有效索引时,返回L[i],若不是,则返回默认值v 解决方案: 列表支持双向索引,所以i可以为负数 >>> ...

  8. 很好用的Tab标签切换功能，延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  9. JDK/bin下工具列表说明

    JDK/bin下工具列表说明 appletviewer.exe:一种执行HTML文件上的Java小程序类的Java浏览器 apt.exe:注解处理工具(Annotation Processing To ...

随机推荐

  1. Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

  2. 纯命令行界面下安装并运行官方Android emulator

    纯命令行界面指没有安装Android studio. 下载sdk-tools 可以根据实际需要下载,不需要FQ(2018-04-07) 下载后只有一个tools目录. 平台 SDK 工具包 大小 SH ...

  3. final发布视频展示博客

    Part One [探路者]选题展示视频链接: http://v.youku.com/v_show/id_XMzIxMDM2MTQ1Ng==.html?spm=a2h3j.8428770.341605 ...

  4. 实验三：跟踪分析Linux内核的启动过程

    实验三:跟踪分析Linux内核的启动过程 学号:20135114 姓名:王朝宪 注: 原创作品转载请注明出处   <Linux内核分析>MOOC课程http://mooc.study.16 ...

  5. 20172308 实验二《Java面向对象程序设计 》实验报告

    20172308 2017-2018-2 <程序设计与数据结构>实验2报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 周亚杰 学号:20172308 实验教师:王 ...

  6. Math 类的使用（一小部分）

    package com.Date.Math; /* Math 数学类, 主要是提供了很多的数学公式. abs(double a) 获取绝对值 ceil(double a) 向上取整 floor(dou ...

  7. spring 原理

    1.spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运 ...

  8. 【贪心算法】POJ-2393 简单贪心水题

    一.题目 Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. Over ...

  9. 注册表：DWORD

    百度百科 DWORD全称Double Word,是指注册表的键值,每个word为2个字节的长度,DWORD 双字即为4个字节,每个字节是8位,共32位. 在键值项窗口空白处单击右键,选择“新建”菜单项 ...

  10. C++操作mysql方法总结（3）

    C++通过mysql++操作mysql的方式   使用vs2013和64位的msql 5.6.16进行操作 项目中使用的数据库名和表数据请参考C++操作mysql方法总结(1)中的介绍   Mysql ...