计算开始显示的行数,和最后显示的行数
遍历显示数据实现分页
实现最下方的显示,第几页,上一页,下一页
当前页为第一页时,上一页没有点击事件
当前页为最后一页时,下一页没有点击事件
否则,上一页和下一页均可使用,点击某一页会跳转到那一页
到此,分页效果已经实现了。
主要思路:就是点击当前页时,它自己显示,其它的都隐藏;
下面是简单的代码实现:
<style>input.active {background:yellow}
div {width:200px height:200px border:1px solid red display:none}
div.active {display:block}
</style>
<script>
window.onload=function(){
var aBtn = document.getElementsByTagName('input')
var aDiv = document.getElementsByTagName('div')
for(var i =0 i<aBtn.lengthi++)
{
(function(index){ //因为要存储点击的下标,所以需要做一个参数引入。学名叫'自执行匿名函数'。
aBtn[i].onclick=function(){
//这个for循环的作用是将所以的都隐藏。
for(var i =0 i<aBtn.lengthi++)
{
aBtn[i].className=''
aDiv[i].className=''
}
//这是将当前点击的显示。
this.className='active'
aDiv[index].className='active'
}
})(i)
}
}
</script>
</head>
<body>
<input type="button" value="111" class='active' />
<input type="button" value="222" />
<input type="button" value="333" />
<div class="active">11111111111</div>
<div>22222222222</div>
<div>33333333333</div>
</body>