首页 > 代码库 > JS写动态分页样式效果

JS写动态分页样式效果

2024-09-11 21:58:25   222人阅读

效果图如下：

技术分享

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>

 

JS写动态分页样式效果


联系
我们