JS高手请进,如何做这样的切换效果?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>员工详细信息</title>
<style type="text/css">
<!--
#toptwo{FONT-SIZE: 12px;LINE-HEIGHT: normal;}
#toptwo UL {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 5px; LIST-STYLE-TYPE: none;
}
#toptwo LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: url(../images/left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#toptwo A {
PADDING-RIGHT: 8px; DISPLAY: block; PADDING-LEFT: 0px;FONT-SIZE: 12px; BACKGROUND: url(../images/right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #000; LINE-HEIGHT: 12px; PADDING-TOP: 7px; TEXT-DECORATION: none
}
#toptwo A {
FLOAT: none
}
#toptwo A:hover {
COLOR: #f00;
}
#toptwo .current {
BACKGROUND-IMAGE: url(../images/left_on.gif)
}
#toptwo .current A {
BACKGROUND-IMAGE: url(../images/right_on.gif); PADDING-BOTTOM: 5px; COLOR: #f00;
}-->
</style>
<script type="text/javascript">
function doClick_tab(o,n){
 o.className="current";
 var j;
 var id;
 var e;
 for(var i=1;i<=n;i++){
   id ="tab"+i;
   j = document.getElementById(id);
   e = document.getElementById("tab_con"+i);
   if(id != o.id){
     j.className="li";
     e.style.display = "none";
   }else{
e.style.display = "block";
   }
 }
 }
</script>
</head><body>
  <div id="toptwo">
              <ul>
                <li class="current"><a href="#" id="tab1" onclick="javascript:doClick_tab(this,3)">基本信息</a></li>
                <li><a href="#" id="tab2" onclick="javascript:doClick_tab(this,3)">重要联系信息</a></li>
                <li><a href="#" id="tab3" onclick="javascript:doClick_tab(this,3)">财务信息</a></li>
              </ul>   
            </div>
</body>
</html>当前按钮由left.gif和right.gif组成,样式为li和li a
默认按钮由left_on.gif和right_on.gif组成,样式式为.current和.curret a 
请问这样由二个图片组成的按钮,如何用JS来切换啊,现在的效果是点击第二个按钮时,样式调用不到了,请高手给个源码,谢谢.