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. vs2013update4 vs-mda-remote cordova真机测试ios 解决里面一个坑

    sudo npm install -g vs-mda-remote --user=你的用户名 此步骤为安装vs-mda-remote,如果安装成功 执行vs-mda-remote –secure fa ...

  2. 关于pcre正则表达式库libpcre

    gcc 4.8中已经包含了std regex的头文件 可是没有实现,所以链接是失败的 gcc 4.9完整的支持了c++ 11的regex. 在4.9以前,可以寻求boost的regex. 不过,我更熟 ...

  3. Xamarin Mono错误: unable to find explicit activity class

    unable to find explicit activity class在android开发很常见,网上一般是java的解决办法,对我们这些xamariner就无语了. xamarin中用attr ...

  4. [BZOJ 3626] [LNOI2014] LCA 【树链剖分 + 离线 + 差分询问】

    题目链接: BZOJ - 3626 题目分析 考虑这样的等价问题,如果我们把一个点 x 到 Root 的路径上每个点的权值赋为 1 ,其余点的权值为 0,那么从 LCA(x, y) 的 Depth 就 ...

  5. MyEclipse右键new菜单项的设置 及 Eclipse中各种文件不能保存中文的问题

    有时候,myeclipse右键new的时候经常出现一些ejb等文件你懂的,很是恶心~~ Window --> Customize Perspective --> Submenus --&g ...

  6. Sereja ans Anagrams

    Codeforces Round #215 (Div. 1) B:http://codeforces.com/problemset/problem/367/B 题意:给你两个序列a,b,然后给你一个数 ...

  7. Prime Path

    poj3126:http://poj.org/problem?id=3126 题意:给你两个数n,k,两个数都是四位数的素数.现在让你改变n的一位数,让n变成另外一个素数.然后把这个素数在改变其中的以 ...

  8. 【HDOJ】3451 Beat drop

    BFS.当水滴破裂飞溅后,直到碰到水滴才会停止(观察case1).同时,考虑当水滴飞溅到点(x,y)并且该点同一时间破裂的情况,该水滴算作吸收. /* 3451 */ #include <ios ...

  9. SQL中的NULL值

    除is [not] null之外,空值不满足任何查找条件.–如果null参与算术运算,则该算术表达式的值为null.–如果null参与比较运算,则结果可视为false.在SQL-92中可看成unkno ...

  10. RAM——[HAOI2007]理想的正方形

    题目:[HAOI2007]理想的正方形 描述: [问题描述] 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. [输入]: 第一行为3个 ...