要求：当点击不同的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. Ｃ#中字符串 "驻留"与Lock(转载)

    class TestWorker 2 {         3     public void DoMultiThreadedWork(object someParameter) 4     { 5   ...

  2. docker usage

    docker ps -a 查看物理机上面所有容器信息列表 docker exec -it $docker_id /bin/bash 进入容器以默认帐号 docker exec -it -u root ...

  3. Linux 文件系统 -- 简述几种文件类型

    Linux 中一切皆为文件,文件类型也有多种,使用 ls -l 命令可以查看文件的属性,所显示结果的第一列的第一个字符用来表明该文件的文件类型,如下: 1.普通文件 使用 ls -l 命令后,第一列第 ...

  4. Docker入门与实践之 Dockerfile 语法详解

    一.Dockerfile 概述 Dockerfile是docker程序的解释脚本文件,Dockerfile 是一条一条的指令,Docker程序将dockerfile中的一条条指令编译成Linux可执行 ...

  5. 关于如何使用dubbo管理控制台的一些感想

    1.起因 ​因java项目需要准备安装一个dubbo-admin管理后台研究使用,无奈github上并没有看到dubbo-admin的目录着实让人着急.百度引擎上一些文章也不靠谱!真是浪费时间!所以又 ...

  6. Daily Scrum (2015/11/6)

    今晚除了玉钟焕的其他成员在一起开了个短会.讨论有关添加新功能以及一些BUG问题.由于时间原因,我们本想把动态爬取功能留到第二个迭代中,但是现在目前时间还够,我们便一起对这一功能的讨论和实现进行分析. ...

  7. Java程序设计第四次实验报告

    北京电子科技学院(BESTI) 实     验    报     告 课程:java程序设计 班级:1352  姓名:何伟钦  学号:20135223 成绩:            指导教师:娄嘉鹏 ...

  8. java怎样把后台值传到前台

    后台代码:if(this.Request["type"]!=null){aaa=this.Request["type"].ToString(); try{bbb ...

  9. 封装react组件——三级联动

    思路: 数据设计:省份为一维数组,一级市为二维数组,二级市/区/县为三维数组.这样设计的好处在于根据数组索引实现数据的关联. UI组件: MUI的DropDownMenu组件或Select Field ...

  10. Java网络编程二：Socket详解

    Socket又称套接字,是连接运行在网络上两个程序间的双向通讯的端点. 一.使用Socket进行网络通信的过程 服务端:服务器程序将一个套接字绑定到一个特定的端口,并通过此套接字等待和监听客户端的连接 ...