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. GNU 网络程序

    ______________________________________________________________________________ | 版权声明 | | 1.本文可以转载.修 ...

  2. Facebook IV Winner's Interview: 1st place, Peter Best (aka fakeplastictrees)

    Facebook IV Winner's Interview: 1st place, Peter Best (aka fakeplastictrees) Peter Best (aka fakepla ...

  3. 分页查询SQL

    SELECT * FROM ( SELECT   T.*,   ROWNUMBER() OVER() AS ROWNUM   FROM   ( SELECT     L4_GDS_GROUP_CD C ...

  4. [OpenGL]VS2010配置OpenGL开发环境

    opengl概述 OpenGL(Open Graphics Library)是一个跨编程语言.跨平台的专业图形程序接口. OpenGL是SGI公司开发的一套计算机图形处理系统,是图形硬件的软件接口,任 ...

  5. -_-#【Better JS Code】严格模式

    要在整个脚本中启用严格模式,可以在顶部添加如下代码: "use strict"; 这行代码看起来像是字符串,而且也没有赋值给任何变量,但其实它是一个编译指示,用于告诉支持的 Jav ...

  6. 组合数学(Pólya计数原理):UvaOJ 10601 Cubes

    Cubes You are given 12 rods of equal length. Each of them is colored in certain color. Your task is ...

  7. 将C#程序嵌入资源中(C# 调用嵌入资源的EXE文件方法)

    1. 我们有一个test.exe的WinForm程序,这是我们要加壳的目标程序. 2. 新建一个WinForm工程,删除Form1,然后新建一个类.如下. 3. 将test.exe 拷贝到该工程目录, ...

  8. Maximum Product Subarray——LeetCode

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  9. 暴力求解——除法 Division,UVa 725

    Description Write a program that finds and displays all pairs of 5-digit numbers that between them u ...

  10. How To Create a New User and Grant Permissions in MySQL

    How to Create a New User Let’s start by making a new user within the MySQL shell: CREATE USER 'newus ...