效果图如下：
html:
<body> <div> <table id="btnbox"> <tbody> <tr><td> <a href="#" class="btn">上一页</a> <a href="#" index="1">1</a> <a href="#" index="2">2</a> <a href="#" index="3">3</a> <a href="#" index="4">4</a> <a href="#" index="5">5</a> <a href="#" index="6">6</a> <a href="#" index="7">7</a> <a href="#" index="8">8</a> <a href="#" class="btn">下一页</a> </td></tr> </tbody> </table> </div> </body>
CSS:
<style> a{ /* a标签样式 */ width:17px; height:20px; display: inline-block; text-align: center; text-decoration:none; border: 1px #000000 solid; font:12px/20px "宋体"; } .btn{ /* 上一页下一页的宽 */ width:60px; } #btnbox .on{color:#ffffff;background:blue;} /* 预先设置好被点击的分页按钮的被点击状态 ，通过修改a标签的classname进行动态修改当前选中状态 */ a:hover{ /* hover 使鼠标移上去显示背景颜色及边框 */ color:#ffffff; background:blue; } table{ /* 在div中居中显示 */ margin: 0 auto; } </style>
JS：
<script type="text/javascript" language="javascript"> window.onload = function(){var btnlist = document.getElementById('btnbox').getElementsByTagName('a'); //获取table下的所有a标签 注意这里的返回值是一个伪数组，并不支持对数组进行splice等操作，相关伪数组资料自行了解。 var index; //定义一个记录当前选中按钮的变量 for(var i=0;i<btnlist.length;i++){ //使用for循环对1-8按钮进行点击事件绑定 if(i!=0 && i<btnlist.length-1){ //因为上一页下一页也在数组btnlist里面，所以需要排除 btnlist[i].onclick = function(){ clearbtn(); this.className = 'on'; //当鼠标点击该按钮时给按钮设置选中样式 index = parseInt(this.getAttribute('index')); //取出当前按钮即a标签的自定义index值 使用 getAttrinbute 方法 需要转换成整数进行计算 } } } btnlist[0].onclick = function(){ //为上一页绑定点击事件 if(index != 0){goto('-');} } btnlist[btnlist.length-1].onclick = function(){ //为下一页绑定点击事件 if(index != 0){goto('+');} } function goto(x){ //当点击上一页下一页时进行的前后判断操作 console.log(x); if(x == '-' && index != 1){ index = index - 1; } else if(x == '+' && index != 8){ index = index + 1; } clearbtn(); btnlist[index].className = 'on'; //设置当前选中按钮样式 } function clearbtn(){ // 清除选中样式 for(var i=1;i<(btnlist.length-1);i++){ if(btnlist[i].className == 'on'){btnlist[i].className = '';break;} } } btnlist[1].onclick(); } </script>