要求：当点击不同的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. 搭建 Digital Ocean 服务器

    作为程序员,搭建属于自己的服务器可以部署自己的网站,可以配置代理***,了解国际前沿科技:一些高性能的服务器还可以完成一些云计算.深度学习模型的训练任务. DigitalOcean 服务启动 注册 D ...

  2. Task 4.5 求二维数组中的最大连通子数组之和

    任务:输入一个二维整形数组,数组里有正数也有负数. 求所有子数组的和的最大值.要求时间复杂度为O(n). 1.设计思想:因为用之前的解决子数组最大和的问题的思路一直没能解决这个问题,后来看到同学使用将 ...

  3. 软工实践-Beta 冲刺 （1/7）

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...

  4. （2016.2.2）1001.A+B Format (20)解题思路

    https://github.com/UNWILL2LOSE/object-oriented 解题思路 目标: *首先运算要求实现输入2个数后,输出类似于银行的支票上的带分隔符规则的数字. 代码实现思 ...

  5. Ubuntu下tensorboard的使用

    1. 找到运行程序的事件输出路径   找到路径并进入,例如我的是在路径/home/ly/codes下: 2. 打开tensorboard服务器   在终端输入(--logdir=自己所存的路径): t ...

  6. week3a：个人博客作业

    1.博客上的问题 阅读下面程序,请回答如下问题: using System; using System.Collections.Generic; using System.Text; namespac ...

  7. 08_Java基础语法_第8天（Eclipse）_讲义

    今日内容介绍 1.Eclipse开发工具 2.超市库存管理系统 01Eclipse的下载安装 * A: Eclipse的下载安装  * a: 下载 * http://www.eclipse.org ...

  8. scp命令与Screen服务的区别

    scp:远程传输命令.(通过网络传送给其他主机,又恰好两台主机都是linux系统,便可以使用scp传输文件) 参数 作痛 -v 先是详细的连接进度 -P 指定远程主机的sshd端口号 -r 传送文件夹 ...

  9. 蜗牛慢慢爬 LeetCode 5.Longest Palindromic Substring [Difficulty: Medium]

    题目 Given a string s, find the longest palindromic substring in s. You may assume that the maximum le ...

  10. HDU 2103 Family planning

    http://acm.hdu.edu.cn/showproblem.php?pid=2103 Problem Description As far as we known,there are so m ...