图示:
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();
})