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

需求说明：

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

    一.实用的例子 public static void main(String[] args) { // 简单练习 System.out.println("-123".matches ...

  2. 学好Javascript是有方法的

    先声明下噢,这篇文章不是自个儿写的,看着好,希望前端小孩们可以和我一起加油,大家都来借鉴借鉴吧- 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这 ...

  3. 包装类-Character

    1,isDigit();是否是数字 char c = '1'; boolean bool = Character.isDigit(c); System.out.println(bool);//true ...

  4. CMake实践（3）

    一,本期目标 [sun@localhost t3]$ cat README t3:静态库(.a)与动态库(.so)构建    任务:1,建立一个静态库和动态库,提供HelloFunc函数供其他程序编程 ...

  5. cong

    Directions:  Study the following cartoon carefully and write an essay in which you should 1) descr ...

  6. mysql Access denied for user \'root\'@\'localhost\'”解决办法总结，下面我们对常见的出现的一些错误代码进行分析并给出解决办法，有需要的朋友可参考一下。

    mysql Access denied for user \'root\'@\'localhost\'”解决办法总结,下面我们对常见的出现的一些错误代码进行分析并给出解决办法,有需要的朋友可参考一下. ...

  7. 从SVN导出指定版本号之间修改的文件（转）

    从SVN导出指定版本号之间修改的文件(转)   当一个网站项目进入运营维护阶段以后,不会再频繁地更新全部源文件到服务器,这个时间的修改大多是局部的,因此更新文件只需更新修改过的文件,其他没有修改过的文 ...

  8. 部署WAR文件到tomcat

    1.启动tomcat服务 2.在浏览器的地址栏输入地址“http://localhost:8080/manager/html”进入tomcat管理界面. 如果要管理的服务器是在网络中,则将localh ...

  9. Java多线程的五种状态

    新建状态:new Thread(参数)之后,建立了一个线程对象; 就绪状态:线程对象建立之后,调用start()方法,进入就绪状态,此时并不会直接调用run()方法,线程进入运行状态还需要抢占CPU资 ...

  10. python中的深拷贝与浅拷贝

    深拷贝和浅拷贝 浅拷贝的时候,修改原来的对象,浅拷贝的对象不会发生改变. 1.对象的赋值 对象的赋值实际上是对象之间的引用:当创建一个对象,然后将这个对象赋值给另外一个变量的时候,python并没有拷 ...