PbootCMS长篇内容ajax无刷新分页方法

最近有群友说新闻详情或者产品详情内容比较多，页面拉的很长，有什么办法可以分页显示呢？

去网上索罗一个最简单的js内容分页代码，就是内容显示框固定高度，下一页就显示下一个内容高度，这样就达到了分页的效果

不过这个代码也有一点不好的地方就是，如果里面有图片，位置刚好在这个高度的上下，可能会显示不全。

不多说了，直接上代码

<div class="content mb-3" id="content">{content:content}</div>//内容显示框，要有固定高度(高度自己设定)<div id="pages" class="content mb-3"></div>//分页代码框<script language="javascript">var obj = document.getElementById("content"); //获取内容层var pages = document.getElementById("pages"); //获取翻页层window.onload = function()                    //重写窗体加载的事件{var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));//获取页面数量    pages.innerHTML = "<b>共"+allpages+"页</b>";                                    //输出页面数量    for (var i=1;i<=allpages;i++){    pages.innerHTML += "<a id=page"+i+" href="javascript:showPage('"+i+"','"+allpages+"');">第"+i+"页</a>&nbsp;";//循环输出第几页}    showPage(1,allpages);//执行默认第一页}function showPage(pagenum,allpages)//分页函数{    obj.scrollTop=(pagenum-1)*parseInt(obj.offsetHeight);       //根据高度，输出指定的页    for (var i=1;i<=allpages;i++){   //移除页码样式        document.getElementById("page"+i).style.color="";    }document.getElementById("page"+pagenum).style.color="red";//设置当前页样式}</script>

效果图展示

转载请注明： 织梦模板 » PbootCMS长篇内容ajax无刷新分页方法