console
$('.menu li').eq(0).css({'background':'#ccc'});
$('.menu li').mouseenter(function(){
$(this).css({'background':'#ccc'});
$('.menu li').not($(this)).css({'background':'#272822'});
idx=$(this).index('.menu li');
//index的作用:搜索匹配的元素,并返回相应元素的索引值,从0开始计数
$('.info p').eq(idx).show();
$('.info p').not($('.info p').eq(idx)).hide();
$('.moresp a').eq(idx).show();
$('.moresp a').not($('.moresp a').eq(idx)).hide();
});
<div class='menu'>
<ul>
<li>dog</li>
<li>sheep</li>
<li>basketball</li>
</ul>
</div>
<div class='info'>
<p>1<img src="dog.png" alt="" /></p>
<p>2<img src="sheep.png" alt="" /></p>
<p>3<img src="bk.png" alt="" /></p>
</div>
<p class='moresp'>aa:
<a class="moreStyle" id="more-1" href="#" target="_blank">1更多>></a>
<a class="moreStyle" id="more-2" style="display: none;" href="#" target="_blank">2更多>></a>
<a class="moreStyle" id="more-3" style="display: none;" href="#" target="_blank">3更多>></a>
</p>
*{
font-family: 微软雅黑;
margin:0px;
padding:0px;
}
.menu{
height:50px;
background: #272822;
line-height: 50px;
}
.menu ul{
list-style:none;
}
.menu ul li{
float: left;
color:#fff;
margin-left:15px;
line-height: 50px;
width:100px;
text-align:center;
}
.menu ul li:hover{
cursor: pointer;
background: #ccc;
}
.info{
height:256px;
background: #ccc;
overflow: hidden;
padding:15px;
}
.info p{
display: none;
}
.info p:first-child{
display: block;
}
.menu a:hover{
background: #ccc;
}
.moresp{
}
.moresp a{
color: #000;
}