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. MSSQL中datetime与unix时间戳互转

    //ms sql datetime 转unix时间戳 SELECT DATEDIFF(s, '19700101',GETDATE()) //ms sql unix时间戳 转datetime 涉及到时区 ...

  2. java枚举小结

    如何定义一个枚举类? //定义了4个等级 enum Level{ A,B,C,D } 枚举类的实质: class Level{ public static final Level A = new Le ...

  3. 关于html5

    html5   是用来  将 js  和 css  结合起来 从而实现 各种功能 javascript 用来定义 html5   页面的逻辑 css 来定义 html5 中的显示样式

  4. 2、MyBatis.NET学习笔记之CodeSmith使用

    说明:本系列随笔会与CSDN同步发布,当然这里先发,因为这里可以用WLW.但刚才由于误操作,没有重新发上来.只好先在CSDN先发了.重往这里发时图片无法处理,索性直接粘过来吧! 使用框架后一些相关的配 ...

  5. 【转】常见 jar包详解

    转载自:http://www.cnblogs.com/xusir/archive/2013/05/19/3086878.html   jar包 用途 axis.jar SOAP引擎包 commons- ...

  6. jQuery.dialog

    本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...

  7. Crashing Robots

    Description In a modernized warehouse, robots are used to fetch the goods. Careful planning is neede ...

  8. The Same Game(模拟)

    http://poj.org/problem?id=1027 题意:给一个10*15的地图,里面填充R,G,B三种颜色,每次找到当前地图的同色最大区域M,并将其删除,删除M后,上面的小球自然下落,当有 ...

  9. bzoj1135

    POI阴影又发作了但这道题挺好的,比较涨知识裸的想法是裸的每次二分图匹配,但显然会TLE这里就要引入Hall定理:二分图G中的两部分顶点组成的集合分别为X, Y, X={X1, X2, X3,X4,. ...

  10. Matlab计算机视觉/图像处理工具箱推荐

    Matlab计算机视觉/图像处理工具箱推荐 转载http://cvnote.info/matlab-cv-ip-toolbox/ 计算机视觉/图像处理研究中经常要用到Matlab,虽然其自带了图像处理 ...