<style>
body,ul,li,div{margin:0;padding: 0;}
ul{font-size: 0px;}
.tab_list{
border: 1px gray solid;
width: 400px;height: 50px;
background: gainsboro;
}
ul li{
list-style: none;display: inline-block;
text-align: center;font-size: 14px;
width: 32.8%;line-height: 50px;
}
.tab_con{width:400px;height:120px;
border: 1px solid gainsboro;border-top: 0px;
}
.tab_con .item{display: none;text-indent: 14px;
line-height: 28px; font-size: 18px;
}
.current{color:snow;background:plum;}
</style>
<script>
$(function(){
$(".tab_list ul li").mouseover(function(){
var inds=$(this).index(); // 获取当前 li 的序号
$(this).addClass("current").siblings().removeClass("current"); //给当前的 li 添加 current 的样式，其他兄弟 li 去掉 current 的样式
$(".tab_con div").eq(inds).show().siblings().hide(); // li 对应的 div显示出来，其他兄弟 div 隐藏
})
})
</script>
</head>
<body>
<div class="tab_list">
<ul>
<li class="current">tab一</li>
<li>tab二</li>
<li>tab三</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">
tab一的内容
</div>
<div class="item">
tab二的内容
</div>
<div class="item">
tab三的内容
</div>
</div>
