工作中碰到些困难求解 _Web前端

工作中遇到些困难求解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="images/reset.css"  rel="stylesheet" type="text/css">
<script type="text/javascript" src="images/jquery-1.6.2.js"></script>
<style type="text/css">
body,ul,li,h1,h2,span{ margin:0; padding:0; color:#333; background-color:#fff; font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;}
a{ font-size:14px; color:#FFF; text-decoration:none; outline:none; font-family:"宋体",Arial, Helvetica, sans-serif; font-weight:bold;}
ul,li
{
	list-style:none;
}
.bodyContent
{
	margin:auto;
	margin-top:50px;
	width:982px;
}
.header-frd-state
{
	background:url(images/new_mail_tab_bg.gif) no-repeat -205px 0px ;
	line-height:30px;
}
.header-frd-state a
{
	padding-left:15px;
}
.con-main
{	
	border:3px solid #83A60C;	
}
.msg-listbox
{
	 width:396px;
	 border-right:3px solid #83A60C;
	 display:inline-block;
		 
}
.msg-listbox-font
{
	padding-left:10px;
}
.main-left-item
{
	border-left: 1px solid #FFFFFF;
    border-top: 1px solid #E5E6E2;
	height:44px;
    line-height: 44px;	
}

.main-left-selected
{
	background:url(images/item_border.gif) no-repeat scroll  0 0;	
    cursor: pointer;
    height: 44px;
    line-height: 44px;
    margin-right: -16px;
    position: relative;
    vertical-align: middle;
    z-index: 6000;
	color:#000;
	font-weight:bold;
}
.msg_list_left_box
{
	width:570px;
	float:right;
}
.msg_list_left_box_show
{
	font-size:14px;
	padding-top:30px;
	padding-left:30px;

}
.mail-prevOrnext
{
	border:1px solid #D3D3D3;
	height:22px;
	line-height:22px;
	background:url(images/preOrnex_bg.gif) no-repeat;
	width:577px;
	float:right;
}
.mail-next
{
 	background:url(images/prev_mail_ico.gif) no-repeat scroll right center;
    cursor: pointer;
    margin-right: 16px;
    padding-right: 7px;
}
.mail-prev
{
    cursor: pointer;
    margin-right: 28px;
    padding-left: 7px;
	background:url(images/next_mail_ico.gif) no-repeat scroll left center;
}
.floatright
{
	float:right;
}
</style>
<script type="text/javascript">
window.onload=function()
{
	var li_hover=document.getElementsByTagName('li');
	var msg_list_show=document.getElementById('msg_list_left').getElementsByTagName('div')[3];
	var next=document.getElementById('next');
	var prev=document.getElementById('prev');
	
	var i=0;
	var aDats =['元旦1月1日','2月14日情人节','3月3日全国爱耳日',	
				'4月1日愚人节','5月1日国际劳动节','6月1日 国际儿童节',
				'7月1日中国共产党诞生日','8月1日中国人民解放军建军节','9月10日中国教师节',
				'10月1日中华人民共和国国庆节','11月9日消防宣传日','12月3日世界残疾人日','12月12日世界残疾人日','12月13日世界残疾人日'
				];
	for(var i=0;i<li_hover.length;i++)
	{
		li_hover[i].index=i;
		li_hover[i].onclick=function()
		{
			for(i=0;i<li_hover.length;i++)
			{
				li_hover[i].className='main-left-item';	
				//var n=[this.index];	
			}
			this.className='main-left-selected';
			msg_list_show.innerHTML=aDats[this.index];
		}
		
	}
	
				
        var n=[this.index];	
    	$('#next').click(function(){
		n--;
		$('li').eq(n).click();
			
		});
    	$('#prev').click(function(){
		n++;
		$('li').eq(n).click();
		});
	
};
</script>
<title></title>

</head>

<body>
<div class="bodyContent">
  <div class="header-frd-state"><a href="#">系统消息</a></div>
    <div class="con-main">
    	<div class="msg-listbox">
    		<ul>
                <li class="main-left-item main-left-selected">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                 <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                 <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                 <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
                 <li class="main-left-item">
                    <div class="msg-listbox-font">系统管理员 系统通知消息  2天前</div>
                </li>
               
        	</ul>
        </div>        
        <div class="msg_list_left_box" id="msg_list_left">        
        	<div class="mail-prevOrnext">
            	<div class="mail-next floatright" id="next">上一篇</div>
                <div class="mail-prev floatright" id="prev">下一篇</div>
            </div>
        	<div class="msg_list_left_box_show">
            元旦1月1日
            </div>
        
        </div>
    </div>
</div>
</body>
</html>


问题：当鼠标点击第一条LI时，上一篇及下一篇才能正常， 当点击除第一条LI以外上一篇及下一篇 就不正常
效果：