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