Jquery实现选项卡功能

<!--html部分-->

<div class="arlo_msg msg_1">
<div class="arlo_block"></div>
<div class="arlo_p">
1
</div>

</div>

<div class="arlo_msg msg_2">
<div class="arlo_block"></div>
<div class="arlo_p">2</div>

</div>

<div class="arlo_msg msg_3">
<div class="arlo_block"></div>
<div class="arlo_p">3</div>

</div>

<div class="arlo_msg msg_4">
<div class="arlo_block"></div>
<div class="arlo_p">4</div>

</div>

<div class="arlo_msg msg_5">

<div class="arlo_block"></div>
<div class="arlo_p">5</div>

</div>

<div class="armoit">
<ul>
<li class="move active"><a>系部简介</a></li>
<li class="move"><a>专业设置</a></li>
<li class="move"><a>师资队伍</a></li>
<li class="move"><a>教学环境</a></li>
<li class="move"><a>教学特色</a></li>
</ul>
</div>

<!--css部分-->

.armoit{width:210px;margin-top:10px;}

.armoit ul li.move{width:210px;height:30px;background:url(../images/img09.png) no-repeat;margin-bottom:2px;font-size:14px;font-weight:bolder;line-height:30px;text-align:center;letter-spacing:5px;}

.msg_2{display:none;}

.msg_3{display:none;}

.msg_4{display:none;}

.msg_5{display:none;}

.armoit ul li.active{background-image:url(../images/img08.png);background-repeat:no-repeat;}

<!--Jquery部分-->

$(function(){
$('.armoit ul li').hover(function(){
$(this).addClass('active').siblings().removeClass('active');

var index = $('.armoit ul li').index(this);
$('.arlo_msg').eq(index).show().siblings().hide();
});
})