效果图如下：

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. PHPStorm 批量选择,多光标同时编辑相同的内容

    一直按Alt+J

  2. 启动Hadoop时，DataNode启动后一会儿自动消失的解决方法

    查看slaver1/2的logs,发现 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed for ...

  3. H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  4. jQuery的deferred对象使用详解【转载】

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  5. web前端学习（三）css学习笔记部分（4）-- CSS选择器详解

    4.  元素选择器详解 4.1  元素选择器 4.2  选择器分组 用英文逗号","相连,使用相同的样式表 使用通配符对所有元素进行通用设定. 4.3  类选择器详解 4.3.1. ...

  6. web前端学习（三）css学习笔记部分（3）-- css常用操作

    5.  CSS常用操作 5.1  对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...

  7. Python单元测试浅析

    测试的意义   人们针对一个具体问题,通过分析和设计,最后用编程语言写出了一个程序,如果它通过了语言解释器(编译器)的检查,可以运行了,那么下一步的工作就是设法确认它确实满足了我们需求.这篇文章就是讨 ...

  8. Codeforces Round #304 (Div. 2) B. Soldier and Badges【思维/给你一个序列，每次操作你可以对一个元素加1，问最少经过多少次操作，才能使所有元素互不相同】

    B. Soldier and Badges time limit per test 3 seconds memory limit per test 256 megabytes input standa ...

  9. 理解nodejs的module

    module 在 Node.js 模块系统中,每个文件都视为独立的模块,node在运行某个模块儿时会生成一个module对象 Module { id: '.', exports: 2, parent: ...

  10. 【水滴石穿】FirstReactNativeProject

    这个是一个小demo,项目地址为https://github.com/prsioner/FirstReactNativeProject 有注册,忘记密码还有登陆,应该是用到了react-navigat ...