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. 一种计算e的方法

    原文地址:http://hankjin.blog.163.com/blog/static/3373193720108811316123/ 原理:平均e个(0,1)之间的随机数之和会大于1.原因:n个数 ...

  2. 2014年Facebook的开源成就

    2014是Facebook开源硕果丰硕的一年,其开源项目经理詹姆斯·皮尔斯(James Pearce)连续12天发布开源博客文章展示全年该社交网站在此领域取得的成就. 皮尔斯公布的成就包括以下内容: ...

  3. .net ref关键字在引用类型上的使用

    只接上干货. namespace ConsoleApplication1 { class Person { public string UserName { get; set; } } class P ...

  4. 动态规划(斜率优化):[CEOI2004]锯木厂选址

    锯木场选址(CEOI2004) 从山顶上到山底下沿着一条直线种植了n棵老树.当地的政府决定把他们砍下来.为了不浪费任何一棵木材,树被砍倒后要运送到锯木厂. 木材只能按照一个方向运输:朝山下运.山脚下有 ...

  5. guid转int

    如果你想生成一个数字序列,你将会获得一个19位长的序列. 下面的方法会把GUID转换为Int64的数字序列.  private static long GenerateIntID()  {       ...

  6. MD5加密详解

    MD5加密详解 引言: 我在百度百科上查找到了关于MD5的介绍,我从中摘要一些重要信息: Message Digest Algorithm MD5(中文名为信息摘要算法第五版)为计算机安全领域广泛使用 ...

  7. 《ACM国际大学生程序设计竞赛题解Ⅰ》——基础编程题

    这个专栏开始介绍一些<ACM国际大学生程序设计竞赛题解>上的竞赛题目,读者可以配合zju/poj/uva的在线测评系统提交代码(今天zoj貌似崩了). 其实看书名也能看出来这本书的思路,就 ...

  8. prim模板题

    题目链接:http://acm.hrbeu.edu.cn/index.php?act=problem&id=1223 #include <cstdio> #include < ...

  9. [转载]10 Best Tools For Websites And Apps Development Ever

    转载自: http://www.websurfmedia.com/10-best-tools-for-websites-and-apps-development-ever/   The world i ...

  10. 再看C++引用类型

    之前弃用博客园的原因是其不支持markdown语法.到今天偶然进来试了一下,发现Markdown toggle原来是能支持的(不知道是不是因为它升级了),遂重新启用. 在一年前学C++的时候就对引用, ...