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

需求说明：

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

    这篇主要介绍的是RAC 环境下的RMAN 备份. 关于Oracle 备份与恢复的一些理论知识参考我的Blog:       Oracle 备份 与 恢复 概述 http://blog.csdn.net ...

  2. MySQL与Oracle 差异比较之一数据类型

    数据类型 编号 ORACLE MYSQL 注释 1 NUMBER int / DECIMAL DECIMAL就是NUMBER(10,2)这样的结构INT就是是NUMBER(10),表示整型:MYSQL ...

  3. MySQL基础之第14章 存储过程和函数

    避免编写重复的语句 安全性可控 执行效率高 14.1.创建存储过程和函数 14.1.1.创建存储过程 CREATE PROCEDUREsp_name ([proc_parameter[,...]]) ...

  4. java批量插入或更新的问题

    在批量插入或者更新中,setXXX的时候字段类型必须一致.例如:在普通sql中 pstmt8.setBigDecimal(j ,xxx);可以写成pstmt8.setString(j,xxx.toSt ...

  5. 使用poi解析Excel

    解析XLS package xls; import java.io.FileInputStream; import java.io.IOException; import java.io.InputS ...

  6. [禅悟人生]"执著"是自缚的茧

    宋代苏东坡和佛印禅师是好朋友,他们习惯拿对方开玩笑.有一天,苏东坡到金山寺和佛印禅师打坐参禅,苏东坡觉得身心通畅,于是问禅师道:“禅师!你看我坐的样子怎么样?” “好庄严,像一尊佛!” 苏东坡听了非常 ...

  7. redis介绍【转】

    Redis新的存储模式diskstore Thursday, Jan 6th, 2011 by Tim | 13 CommentsFiled under: data | Tags: Mongo, Mo ...

  8. AudioManager --- generateAudioSessionId

    AudioManager中的generateAudioSessionId方法介绍: 1.方法声明 pubilc void generateAudioSessionId(); 2.API描述 返回一个不 ...

  9. 《学习OpenCV》练习题第四章第三题a

    #include <highgui.h> #include <cv.h> #include "opencv_libs.h" #pragma comment ...

  10. HW7.15

    public class Solution { public static void main(String[] args) { double[][] set1 = {{1, 1}, {2, 2}, ...