js实现两个翻页联动的效果

     要求：（上下两个翻页效果联动，如下图示）

     

       简易css样式：   

<style>
div,p,a{ margin:0; padding:0 }
.mt20{ margin-top:20px }
.box{ width:960px; margin:20px auto }
.box a{ width:20px; height:20px; margin:0 5px; background:#f2f2f2; border:1px solid #d2d2d2; font:normal 12px/20px Arial; 
 text-align:center; color:#333; display:inline-block;  text-decoration:none; }
.box a:hover{ color:#333; text-decoration:none; }
.box a.on{ background:#05b; border:1px solid #06F; color:#fff; font-weight:bold; }
</style>

       html代码：

<div class="box">
<p class="mt20"><a href="#" id="a1" onclick="changePage(1)" >1</a><a href="#" id="a2" onclick="changePage(2)">2</a><a href="#" id="a3" onclick="changePage(3)">3</a><a href="#" id="a4" onclick="changePage(4)">4</a><a href="#" id="a5" onclick="changePage(5)">5</a></p>
<p class="mt20"><a href="#" id="b1" onclick="changePage(1)" >1</a><a href="#" id="b2" onclick="changePage(2)">2</a><a href="#" id="b3" onclick="changePage(3)">3</a><a href="#" id="b4" onclick="changePage(4)">4</a><a href="#" id="b5" onclick="changePage(5)">5</a></p>
</div>

       js：

<script type="text/javascript">
    var ID = ' ';
    function changePage(id){
        var o = document.getElementById("a"+ID);
        var O = document.getElementById("b"+ID);
        var obj = document.getElementById("a"+id);
        var Obj = document.getElementById("b"+id);
        if(o)
        {
            o.className = ' '; 
            O.className = ' '; 
          }
          obj.className = 'on';
          Obj.className = 'on';
          ID = id;
        }
</script>