前端分页跳转实现

该帖子发布于2019-04-26，转载于如何实现html(CSS)的分页功能
今天翻了一下自己的贴子，这是小白发的第一个内容，大概是在两年前了，哈哈，唉一不注意就荒废了两年，以后小白会尽量把自己解决的bug发布到博客上。

今天小白刚刚发布自己的第一个博客，刚入行的我可以说是什么都不懂。这不，正在做一个页面的我需要用到分页功能，所以，我在度娘上搜索了一番，终于发现了几行能实现的代码，但是，在运行时，我发现这段代码有bug
代码如下：
一般html网页，可以采用div的css属性控制显示和隐藏来实现分页的目的。
display:block; 这个css属性可以让div显示出来；
display:none; 这个css属性可以让div隐藏起来；
例如：

<div id="page1" style="display:block;">这是第1页的内容</div>
<div id="page2" style="display:none;">这是第2页的内容</div>
<div id="page3" style="display:none;">这是第3页的内容</div>

然后增加3个按钮，分别是第1页，第2页，第3页，每个按钮有点击事情。
例如：

<a href="javascript:showpage(1);">第1页</a>
<a href="javascript:showpage(2);">第2页</a>
<a href="javascript:showpage(3);">第3页</a>
 <script>
function showpage(page){
  for(var i=1;i<=3;i++) {
    if (page==i){
      document.getElementById("page"+page).style.display="block";
    } else {
      document.getElementById("page"+page).style.display="none";
    }
  }
}
</script>

这几行代码，思路很清晰，但是在运行时，page2无法显示

所以小白对代码进行了修改
代码如下：

  <div id="page1" style="display:block;">这是第1页的内容</div>
<div id="page2" style="display:none;">这是第2页的内容</table>
<div id="page3" style="display:none;">这是第3页的内容</div>
<a href="javascript:showpage(1);">第1页</a>
<a href="javascript:showpage(2);">第2页</a>
<a href="javascript:showpage(3);">第3页</a>
<script>
function showpage(page){
var i=1;
while(i<=3){
if(i!=page)
{
     document.getElementById("page"+i).style.display="none";
}
else if(i==page){
document.getElementById("page"+i).style.display="block";
}
i++;
}
}
</script>

小白把for换成了while，代码的运行很正常，但是while比for话费的时间要高，所以我们要根据实际情况考虑到效率问题，如果，你的数据量非常大，那建议你重新修改为for循环。不过现在的普通计算机运行速度至少每秒百万次，所以小白的代码，还是能帮助到很多人的，但是，归根结底还是前面的那一位前辈给了我启发。如果大家有好的建议，请及时联系小白嗷 QQ:1461329194