代码显示效果如上图所示；

需求说明：

在实际需求中，会遇到这样的情况：不仅是要展示选项卡的内容，而且还有可能在选项卡中需求顾客填写相关内容，而这些内容是顾客如果想了解更深层次的，就会继续填写右边的内容；如果顾客只是看看，那么他就不会填写，鼠标离开右边这块，或者点击一下dom,右边就自动消失。所以在做这个选项卡的时候就要注意定时器的应用；

代码效果说明：

分为左边和又边，当鼠标滑到左边的各个盒子的时候，右边对应的盒子内容就出现，出现1秒后，如果鼠标没有移入右边的盒子，那么右边的内容盒子就在1秒后自动消失；如果鼠标移入右边的盒子时，右边的盒子就不会消失；当鼠标点击dom的时候，右边的盒子也可以消失；

代码展示如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .left{float:left}

         .right{float:left;margin-left:200px;width:300px;height:300px;position:relative}

         .left div{width:100px;height:60px;margin-top:50px;}

         .right div{width:300px;height:300px;margin-top:50px;display: none;position:absolute;left:0;top:0}

         .color1{background:#c0a16b}

         .color2{background: #00b4ff}

         .color3{background: #78b907}

     </style>

     <script src="js/jquery-3.1.0.min.js"></script>

     <script>

         $(function() {

             var timer=null;

             //当进入的时候，让右边对应的显示,注意清除计时器

             $(".left").children().each(function (index) {

                 $(this).on("mouseenter", function () {

                     clearTimeout(timer)

                     $(".right").children().eq(index).css("display", "block").siblings().css("display", "none")

                 }).on("click",function(event){

                     event.stopPropagation();//点击的时候阻止上面的事件继续发生

                 })

             });

             $(".left").children().each(function (index) {

                     $(this).on("mouseout", function () {

                         timer=setTimeout(function(){

                             $(".right").children().eq(index).css("display", "none").siblings().css("display", "none")

                         },1000)

                     });

                 });

 //            当进入右边的时候，让他不消失

             $(".right").find("div").each(function(){

                 $(this).on("mouseenter",function(){

                     clearTimeout(timer)

                     $(this).css("display", "block").siblings().css("display", "none")

                 }).on("mouseout",function(){

                     $(this).css("display", "none").siblings().css("display", "none")

                 })

             })

 //            点击dom的时候，让右边的消失

             $(document).on("click",function(index){

                 $(".right").children().eq(index).css("display", "none").siblings().css("display", "none")

             })

         })

     </script>

 </head>

 <body>

 <div class="left">

     <div class="box1 color1">盒子1</div>

     <div class="box2 color2">盒子2</div>

     <div class="box3 color3">盒子3</div>

 </div>

 <div class="right">

     <div class="cont1 color1">盒子1对应的内容</div>

     <div class="cont2 color2">盒子2对应的内容</div>

     <div class="cont3 color3">盒子3对应的内容</div>

 </div>

 </body>

 </html>

tab栏切换的特殊效果（类似网易的登陆栏效果）的更多相关文章

  1. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  2. 类似网易新闻 title栏 滚动时 文字放大&变色

    http://files.cnblogs.com/files/n1ckyxu/ScrollTitleView.zip

  3. Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果

    这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件.Google在2015的IO大会上,给我们带来了更加详细的Mat ...

  4. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

  7. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  8. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  9. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

随机推荐

  1. Thrift——初学

    是什么? Thrift是一个跨语言的服务部署框架最初由Facebook于2007年开发,2008年进入Apache开源项目.Thrift通过一个中间语言(IDL, 接口定义语言)来定义RPC的接口和数 ...

  2. ActiveMQ之二--JMS消息类型

    1.前言 //发送文本消息 session.createTextMessage(msg); //接受文本消息 public void onMessage(Message msg) { TextMess ...

  3. java int和String类型之间的相互转换

    String --> int 第一种方法:int i = Integer.parseInt(s); 第二种方法:int i = Integer.valueOf(s).intValue(); 两种 ...

  4. Intellij IDEA开发第一个Android应用

    1.创建一个项目 File——>New Project——>.......——>Finish 2.创建模块 3.MyActivity.java package com.example ...

  5. 1005acm罚时

    ACM国际大学生程序设计竞赛是由国际计算机学会主办的,一项旨在展示大学生创新能力.团队精神和在压力下编写程序.分析和解决问题能力的年度竞赛.参赛队伍最多由三名参赛队员组成,竞赛中一般命题10-13题, ...

  6. 再来说说Activity

    经过前面多天的了解,现在可以确信一点: activity提供了用户和程序交互的界面. 而且android里有四大组件:Activity,Service,BroadcastReceiver,Conten ...

  7. 阿里巴巴2013年实习生笔试题B

    阿里巴巴集团2013实习生招聘技术类笔试题(B) 一.单向选择题 1.在常用的网络协议中,___B__是面向连接的.有重传功能的协议. A. IP B. TCP C. UDP D. DXP 2.500 ...

  8. （转载）OC学习篇之---类的延展

    前一篇文章我们介绍了类的类目概念和使用,那么这篇文章我们继续来介绍一下OC中的一个特性:延展. 其实说白了,延展就是弥补C语言中的前向申明,我们知道,在C语言中,如果你想调用一个函数的话,那么在此之前 ...

  9. 看过的bootstrap书籍（附下载地址）

    http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...

  10. kerboros安装

    尽管前面尝试了hadoop的simple认证方式,这种方法不是特别安全,在介绍一下hadoop的kerberos方式之前,下面我们尝试一下kerberos. 首先介绍一下Kerboros安装 OS 版 ...