要求：当点击不同的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. 正确配置 debian squeeze apt 源

    本想在 Debian Squeeze 上安装一些依赖,没想到刚执行 apt-get update ,就出现这样的错误信息. W: GPG error: http://mirrors.163.com s ...

  2. sqli-labs学习笔记 DAY6

    DAY 6 sqli-labs lesson 30 与上一题一样,需要用到HPP 查看源代码,参数两边加上了双引号,直接使用lesson 26a与lesson 27a的脚本即可 sqli-labs l ...

  3. 点斜杠 & 如何查看linux程序安装位置 dpkg -L yyy

    方法1: sudo find / -name ssh 方法2: Ubuntu下 看应用程序安装路径的方法 ubuntu下dpkg -L xxx看应用程序安装路径 1.点斜杠 “./”就代表在当前目录下 ...

  4. virtual box下安装ubuntu经验

    1. 哪怕下载的是ubuntu64位版本,也在vitualbox下选择ubuntu而不要选择ubuntu(64bit) 2. 安装VBoxGuestAdditional.iso:下载和vbox版本相匹 ...

  5. python基础知识-12-模块的了解

    python其他知识目录 1.模块介绍: Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句.模块让你能够有逻辑地组织你 ...

  6. dos2unix命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/leedaning/article/details/53024290 使用git 的时候碰到git将unix换行符转换为wi ...

  7. mutt命令详解

    基础命令学习目录首页 linux命令——mutt的安装和使用[转] 首先介绍一下mutt这个软件,它是一款基于文字界面的邮件客户端,非常小巧,但功能强大,可以用它来读写,回复保存和删除你的邮件,能在l ...

  8. Daily Scrum (2015/11/8)

    由于编译大作业临近deadline以及各项选修课即将结课,虽然PM强调软工任务也很紧迫,但是大多数成员表示今天想请假一天.符美潇今天把自己所负责的数据库编码部分和谢金洛的UI进行了对接.在测试过程中发 ...

  9. 20lanmo162326 2017-2018-1 《程序设计与数据结构》第1周学习总结

    20162326 2017-2018-1 <程序设计与数据结构>第1周学习总结 教材学习内容总结 算法:在特定计算模型下,解决问题的指令序列 计算 = 信息处理 也就是用工具,遵规则,机械 ...

  10. "重力锁屏"Beta版使用说明

    一.产品介绍 重力锁屏是基于android系统的一款锁屏软件.它利用重力感应器来判断用户的动作从而自动锁屏亮屏,是锁屏软件的一大创新.相比传统的锁屏软件,“重力锁屏”从可操作性.方便性.功能全面性都有 ...