效果图如下：

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】动态分页样式效果的更多相关文章

  1. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  2. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  4. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  5. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  8. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  9. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

随机推荐

  1. Ubuntu下安装Mongo方法

    场景:Ubuntu14下安装mongo,建议不要使用apt-get install 的命令安装,因为版本比较老 1.deb下载地址(可以自行选择OS,版本,server或tool或shell)http ...

  2. Codeforces Round #192 (Div. 2) A. Cakeminator【二维字符数组/吃掉cake,并且是一行或者一列下去，但是该行/列必须没有草莓的存在】

    A. Cakeminator time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  3. python ndarray相关操作：拼接

  4. spark-ML基础

    一.ML组件 ML的标准API使用管道(pipeline)这样的方式,可以将多个算法或者数据处理过程整合到一个管道或者一个流程里运行,其中包含下面几个部分: 1. dataFrame:用于ML的dat ...

  5. Ubuntu无法连接无线网

    shell里输入: su ifconfig wlan0 up 不行的话 rfkill block all rfkill unblock all ifconfig wlan0 up

  6. php实现希尔排序

    对于排序的算法我想大家首先想到的事  冒泡排序:快速排序:或者想起选择和插入排序: 今天的讲解并不是以上四种:而是希尔排序: 对18W个数字排序,时间比较(毫秒) 希尔排序 0.1s 就完成了,有点不 ...

  7. No.3 Verilog 语言要素

    - 标识符 任意字母.数字."$"和"_"组成,标识符第一个不能是数字. - 注释 ()/*可扩展多行*/ ()//本行结束 - 系统函数 以$字符开始的标识符 ...

  8. 解决“google快照无法打开”的简单而有效的方法～

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/yangle20081982/article/details/25892553        解决&q ...

  9. oracle-12333错误

    Errors in file /oracle/OraHome1/admin/hndw/udump/hndw_ora_17941.trc: ORA-00600: internal error code, ...

  10. php 获取客户端的ip、地理信息、浏览器信息、本地真实ip

    转自:http://www.blhere.com/948.html 这是非常实用的php常用类.获取客户端的ip.地理信息.浏览器信息.本地真实ip 1234567891011121314151617 ...