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

需求说明：

在实际需求中，会遇到这样的情况：不仅是要展示选项卡的内容，而且还有可能在选项卡中需求顾客填写相关内容，而这些内容是顾客如果想了解更深层次的，就会继续填写右边的内容；如果顾客只是看看，那么他就不会填写，鼠标离开右边这块，或者点击一下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. RAC 环境下修改归档模式

    RAC环境下的归档模式切换与单实例稍有不同,主要是共享存储所产生的差异.在这种情况下,我们可以将RAC数据库切换到非集群状态下,仅仅在一个实例上来实施归档模式切换即可完成RAC数据库的归档模式转换问题 ...

  2. Android随笔--使用ViewPager实现简单地图片的左右滑动切换

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布 ...

  3. cp: omitting directory”错误的解释和解决办法

    在linux下拷贝的时候有时候会出现cp:omitting directory的错误 ,例如 cp:omitting directory "bbs" 说明bbs目录下面还有目录,不 ...

  4. 【转】linux之mkfs/mke2fs格式化

    转自:http://blog.csdn.net/andyhooo/article/details/5321584 mkfs [root@www ~]# mkfs [-t 檔案系統格式] 裝置檔名 選項 ...

  5. 【C#】构造函数的特点

    1.它的函数名与类名相同:2.它可以重载:3.不能指定返回类型,即使是void也不行:4.虽然在一般情况下,构造函数不被显式调用,而是在创建对象时自动被调用.但是并不是不能被显示调用.有些时候是一定要 ...

  6. Typecho集成ueditor笔记

    前言:萝卜青菜各有所爱,因为个人需求所以需要在博客中集成ueditor,并非是我不喜欢md语法 其实本篇的笔记的书写最早也是在本地的md编辑器上完成的 1. 首先下载ueditor编辑器,然后重命名文 ...

  7. Maven异常: No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK解决(能力工场小马哥)

    问题描述: No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JD ...

  8. NServiceBus-日志

    默认的日志 NServiceBus一些有限,固执己见,内置的日志记录. 默认的日��行为如下: 控制台 所有 Info(及以上)消息将被输送到当前的控制台. 错误将会写 ConsoleColor.Re ...

  9. Node.js V0.12 新特性之性能优化

    v0.12悠长的开发周期(已经过去九个月了,并且还在继续,是有史以来最长的一次)让核心团队和贡献者们有充分的机会对性能做一些优化. 本文会介绍其中最值得注意的几个. http://www.infoq. ...

  10. git(osx)上的一个git commit无法正确提交的问题

    我发现在我修改我自己的文件之后企图使用git commit编辑更加详细的争对这次提交的信息的时候 我mac上的vi编辑器貌似 出现了问题 大概报这个错. error: There was a prob ...