图示：
html代码：
<ul class="navlist"> <li class="nav">1</li> <li class="nav">2</li> <li class="nav">3</li> <li class="nav">4</li> <li class="nav">5</li> </ul> <div class="big_wrap"> <div class="div">1</div> <div class="div">2</div> <div class="div">3</div> <div class="div">4</div> <div class="div">5</div> </div> <div class="wenzi"></div>css代码：
ul{ width: 1000px; height: 100px; display: block; } .nav{ width: 200px; height: 100px; background: #ccc; display: block; float: left; border: 1px solid #fff; text-align: center; line-height: 100px; } .active{ color: #fff; background: pink; } .big_wrap{ position: relative; } .div{ width: 1000px; height: 300px; background:#ccc; display: none; position: absolute; top: 0; left: 0; } .wenzi{ width: 100%; height: 500px; background: red; }js代码：
$('.navlist .nav:first').addClass('active') //默认设置第一项为当前样式 $('.navlist .nav').on('mouseenter',function(){ //获取当前操作下标 var index=$(this).index(); $(this).addClass('active'); //鼠标移入项设置为当前样式并让自己的兄弟节点取消当前样式 $(this).siblings().removeClass('active'); $('.big_wrap .div').eq(index).show(); $('.big_wrap .div').eq(index).siblings().hide(); }) $('.navlist .nav').on('mouseout',function(){ var index=$('.navlist .nav').index(this); $('.big_wrap .div').eq(index).hide(); }) $('.big_wrap .div').on('mouseenter',function(){ $(this).show(); }) $('.big_wrap .div').on('mouseout',function(){ $(this).hide(); })