效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/01289330e42c8884d7bbaab9443e6cf2.png)
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
*{box-sizing:border-box;}
#nav{height:40px;}
#nav a{display:block;height:40px;line-height:40px; width:100px; font-size:18px;text-align:center;float:left;background-color:#86cad7; border-bottom: 4px solid #fff; cursor:pointer;color: #fff;margin-right: 4px;}
#nav a.on{background-color: #fad2cc; border-bottom-color: #fad2cc}
#contentBox{width:308px;height:180px;}
#contentBox .box{text-align:center;line-height:180px;font-size:24px;font-weight:blod;display:none;background-color: #fad2cc;color: #fff;}
#contentBox .box.active{display:block;}
</style>
</head>
<body>
<div class="tab">
<div id="nav">
<a class="on">tab1</a>
<a>tab2</a>
<a>tab3</a>
</div>
<div id="contentBox">
<div class="box active">第一部分</div>
<div class="box">第二部分</div>
<div class="box">第三部分</div>
</div>
</div>
<script>
$(function(){
$("#nav a").hover(function(){
var index = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$("#contentBox .box").eq(index).show().siblings().hide();
});
});
</script>
</body>
</html>