代码显示效果如上图所示；
需求说明：
在实际需求中，会遇到这样的情况：不仅是要展示选项卡的内容，而且还有可能在选项卡中需求顾客填写相关内容，而这些内容是顾客如果想了解更深层次的，就会继续填写右边的内容；如果顾客只是看看，那么他就不会填写，鼠标离开右边这块，或者点击一下dom,右边就自动消失。所以在做这个选项卡的时候就要注意定时器的应用；
代码效果说明：
分为左边和又边，当鼠标滑到左边的各个盒子的时候，右边对应的盒子内容就出现，出现1秒后，如果鼠标没有移入右边的盒子，那么右边的内容盒子就在1秒后自动消失；如果鼠标移入右边的盒子时，右边的盒子就不会消失；当鼠标点击dom的时候，右边的盒子也可以消失；
代码展示如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .left{float:left} 8 .right{float:left;margin-left:200px;width:300px;height:300px;position:relative} 9 .left div{width:100px;height:60px;margin-top:50px;} 10 .right div{width:300px;height:300px;margin-top:50px;display: none;position:absolute;left:0;top:0} 11 .color1{background:#c0a16b} 12 .color2{background: #00b4ff} 13 .color3{background: #78b907} 14 </style> 15 <script src="js/jquery-3.1.0.min.js"></script> 16 <script> 17 $(function() { 18 var timer=null; 19 //当进入的时候，让右边对应的显示,注意清除计时器 20 $(".left").children().each(function (index) { 21 $(this).on("mouseenter", function () { 22 clearTimeout(timer) 23 $(".right").children().eq(index).css("display", "block").siblings().css("display", "none") 24 }).on("click",function(event){ 25 event.stopPropagation();//点击的时候阻止上面的事件继续发生 26 }) 27 }); 28 $(".left").children().each(function (index) { 29 $(this).on("mouseout", function () { 30 timer=setTimeout(function(){ 31 $(".right").children().eq(index).css("display", "none").siblings().css("display", "none") 32 },1000) 33 }); 34 }); 35 // 当进入右边的时候，让他不消失 36 $(".right").find("div").each(function(){ 37 $(this).on("mouseenter",function(){ 38 clearTimeout(timer) 39 $(this).css("display", "block").siblings().css("display", "none") 40 }).on("mouseout",function(){ 41 $(this).css("display", "none").siblings().css("display", "none") 42 }) 43 }) 44 // 点击dom的时候，让右边的消失 45 $(document).on("click",function(index){ 46 $(".right").children().eq(index).css("display", "none").siblings().css("display", "none") 47 }) 48 }) 49 </script> 50 </head> 51 <body> 52 <div class="left"> 53 <div class="box1 color1">盒子1</div> 54 <div class="box2 color2">盒子2</div> 55 <div class="box3 color3">盒子3</div> 56 </div> 57 <div class="right"> 58 <div class="cont1 color1">盒子1对应的内容</div> 59 <div class="cont2 color2">盒子2对应的内容</div> 60 <div class="cont3 color3">盒子3对应的内容</div> 61 </div> 62 </body> 63 </html>