要求：当点击不同的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. Flink架构分析之资源分配

    Task Slot     Flink中每个真正执行任务的TaskManager都是一个JVM进程,其在多线程环境中执行一个或者多个子任务.为了控制一个JVM同时能运行的任务数量,flink引入了ta ...

  2. NEWBEE软件团队 人员分配情况及分数获得方式

    人员分配: PM:李桐  王骜 dev:王骜 刘垚鹏 安康  林旭鹏  黄新越 test:黄伟龙 李桐 马佐霖 黄新越 注:黄新越为女生,不方便平时的交流,所以任务分配较为灵活,特分在两个组里. 评分 ...

  3. 渐入OO课的深处，探索多线程的秘密——OO第二次博客总结

    一次又一次的挑战,一次又一次全新的知识,我来到了多线程的面前 第五次作业 1.度量分析 >第五次作业由于很大程度上调用的是前两次电梯的一些代码,所以存在的问题与前几次也十分相似.同时由于第一次使 ...

  4. 实验1：java开发环境的熟悉

    一．实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 3.实现四则运算并进行测试. 二．实验知识点 1. JVM.JRE.JDK的安装 ...

  5. js实现把一个页面层数据传递到另一个页面

    由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...

  6. bug排查

    有时候让朋友,或者群友,或者同事帮忙看一样困扰你很久的bug会得到意向不到的结果. 因为他们往往不像你,已经在调试代码的过程中被一些东西给束缚了.他们会凭借自己的第一直觉来尝试解决问题,跳过你已经走的 ...

  7. grunt入门讲解5：创建插件，安装Grunt以及常见问题

    创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...

  8. 词频统计（WEB）版

    需求: 在以前的基础上把程序迁移到web平台,通过用户上传TXT的方式接收文件. 前端页面代码: <%@ Page Language="C#" AutoEventWireup ...

  9. PAT 甲级 1142 Maximal Clique

    https://pintia.cn/problem-sets/994805342720868352/problems/994805343979159552 A clique is a subset o ...

  10. jQ返回定位插件

    一.jQuery 提供开发者开发插件的几种模式 1.$.extend();     //这个方法是绑定在$上面的.可以通过$直接调用 2.$.fn.方法名     //这个方法是绑定在Dom对象上面的 ...