js之tab页签切换效果

 
    现在web网站,很多地都需要用到tab页签。

 
  示例:
        $(document).ready(function(){
              var curIndex;
              var $lis = $(".active-hd li");
              var $divs = $(".active-bd div");
              // 为每一个tab页签li绑定click事件
             $lis.on("click",function(){
                    curIndex = $(this).index();
                   $(this).addClass("selected").siblings().removeClass("selected");
                   $divs.eq(index).show().siblings().hide();
             });
       });
 
转发来自: 微笑的mvp_lin

Tab页签切换的更多相关文章

  1. bootStrap中Tab页签切换

    关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab&q ...

  2. 移动端 vue + mintUI 实现头部页签切换,按需加载~

    记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...

  3. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  4. Winfon 页签切换及窗体控件自适应

    由于公司的业务调整,最近不仅开发bs,还有不熟悉的cs,人手也不足,项目还多,对于cs来说,算是小白,虽然是一个人,也是硬着头皮写,拖拽控件,自定义控件.一个项目下来,对cs有了很深的认识,这里好好感 ...

  5. tab页签

    <div class="fl" id="newsBox"> <div class="tab1 grayBar"> & ...

  6. 用于实现tab页签切换页面的angular路由复用策略

    使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...

  7. 值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  8. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. Activity“ 阻止自动弹出软键盘”的方法 -尤其是对于Tab页下的!

    我的activity是Tab页签下的~! 所以应把代码加在继承于TabActivity的那个activity中!!而不是由点击Tab页启动的那个activity <activity androi ...

随机推荐

  1. bzoj2395: [Balkan 2011]Timeismoney

    Description      有n个城市(编号从0..n-1),m条公路(双向的),从中选择n-1条边,使得任意的两个城市能够连通,一条边需要的c的费用和t的时间,定义一个方案的权值v=n-1条边 ...

  2. DevOps - Development And Operations

    简介: 研发运维一体化 相关资料: 关于DevOps你必须知道的11件事 我眼中的DevOps DevOps 门户 docker for dotnet系列 docker4dotnet #1 前世今生 ...

  3. Google研究员Ilya Sutskever:成功训练LDNN的13点建议

    Google研究员Ilya Sutskever:成功训练LDNN的13点建议 摘要:本文由Ilya Sutskever(Google研究员.深度学习泰斗Geoffrey Hinton的学生.DNNre ...

  4. Oracle 搜集统计信息的存储过程

    DECLARE CURSOR STALE_TABLE IS SELECT OWNER, SEGMENT_NAME, CASE WHEN SIZE_GB < 0.5 THEN 30 WHEN SI ...

  5. C++ Primer 随笔 Chapter 10 关联容器

    1.关联容器的类型:map(键-值对的集合,可理解为关联数组), set(单纯的键的集合), multimap(一个键对应多个值,键唯一), multiset(相同键可以是多个). 2.pair类型提 ...

  6. thinkphp中的session()方法

    系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成. 用法 session($name, $value='') 参数 name(必须):如果传入数组 则表示 ...

  7. phpMyAdmin 完整路径泄露漏洞2

    漏洞名称: phpMyAdmin 完整路径泄露漏洞 CNNVD编号: CNNVD-201307-651 发布时间: 2013-08-09 更新时间: 2013-08-09 危害等级: 中危   漏洞类 ...

  8. Linux下的定时器:alarm()与setitimer()

    Linux下的定时器有两种,以下分别介绍: 1.alarm 如果不要求很精确的话,用alarm()和signal()就够了 unsigned int alarm(unsigned int second ...

  9. 字符串(后缀自动机):HDU 4622 Reincarnation

    Reincarnation Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  10. c#反序列化

    C#序列化(转载) 2011-03-15  |  凯之风  |  转藏(2) 序列化有下列要求: A> 只序列化PUBLIC的成员变量和属性 B> 类必须有默认识构造函数 C> 如果 ...