HTML 静态页面分页有问题，麻烦大佬们帮帮忙，如何解决这些问题。

Question

代码：http://jsrun.net/7vvKp/edit

可看效果(对项目右键打开)：http://jsrun.net/user/explorer/

这是想要达成的效果，我只写出了分页点击数字，然后版块会切换分页显示，但还有一些问题。

问题1：网页刷新会把全部内容显示出了，点击数字切换才会只显示该数字版块对应的内容。

问题2：设定点击后分页边框色未生效。

问题3：首页、尾页跳转；上一页、下一页这部分js内容不会写。

刚开始接触前端，人很菜，麻烦大佬们，教一下怎么解决这些问题？

Answer 1

1.最简单的解决办法：开一个 ui 框架，譬如：ele-ui
2.简单地写一下配置分页的信息
{
current: 1, // 当前分页
pageNum: 10, // 分页总数
pageSize: 10, // 分页数量
}

然后点击分页更新 current，
然后根据 current 判断页签的颜色，
通过 pageNum 渲染分页总数
通过 pageSize 设置获取数据的数量上限
通过 current * pageSize 设置开始获取数据的 index
通过 （current + 1） * page 设置结束数据获取的 index

Answer 2

你这个是前端做的分页，但实际业务中是通过Ajax请求，给接口传一个当前页数和每页多少条的参数，获取数据的。分页数字也是根据后端返回的数据总数和每页多少条动态渲染出来的。

Answer 3

1. 你好像只设置了点击页码事件，没对初始数据进行处理，比如只显示10条
2. 页码变色还是尽量用类来控制吧
3. 首尾页上下页通过页码与页码总数直接对比，比如首页就是page为1，上下页就是当前页加减
4. 实际业务数据大都是后台来的，前端写好分页器就够了