开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js分页显示div的内容

在JavaScript中实现分页显示div内容，通常涉及以下几个基础概念：

基础概念

DOM操作：JavaScript通过DOM（文档对象模型）来访问和操作HTML元素。
事件处理：通过监听用户的点击事件来切换分页。
数组操作：将需要分页的内容存储在数组中，并根据当前页码显示相应的内容。

实现步骤

HTML结构：创建一个包含内容的div和一个用于分页的按钮区域。
CSS样式：设置基本样式以便内容能被正确显示和分页按钮美观。
JavaScript逻辑：
- 获取所有需要分页的内容。
- 定义每页显示的内容数量。
- 计算总页数。
- 实现切换页码的功能。

示例代码

以下是一个简单的分页示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS分页示例</title>
    <style>
        .content {
            display: none;
        }
        .active {
            display: block;
        }
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="content-container">
        <div class="content">内容1</div>
        <div class="content">内容2</div>
        <div class="content">内容3</div>
        <div class="content">内容4</div>
        <div class="content">内容5</div>
        <!-- 更多内容 -->
    </div>
    <div class="pagination" id="pagination">
        <!-- 分页按钮 -->
    </div>

    <script src="pagination.js"></script>
</body>
</html>

JavaScript (pagination.js)

document.addEventListener('DOMContentLoaded', function() {
    const contentContainer = document.getElementById('content-container');
    const contents = contentContainer.getElementsByClassName('content');
    const itemsPerPage = 2;
    let currentPage = 1;
    const totalPages = Math.ceil(contents.length / itemsPerPage);

    function showPage(page) {
        for (let i = 0; i < contents.length; i++) {
            contents[i].classList.remove('active');
            if ((i / itemsPerPage) + 1 === page) {
                contents[i].classList.add('active');
            }
        }
    }

    function setupPagination() {
        const pagination = document.getElementById('pagination');
        for (let i = 1; i <= totalPages; i++) {
            const button = document.createElement('button');
            button.innerText = i;
            button.addEventListener('click', function() {
                currentPage = i;
                showPage(currentPage);
            });
            pagination.appendChild(button);
        }
    }

    showPage(currentPage);
    setupPagination();
});

优势

用户体验：分页可以减少一次性加载大量数据的压力，提升页面响应速度。
内容管理：方便管理和展示大量内容，避免页面过于拥挤。

应用场景

新闻列表：在新闻网站中分页显示新闻条目。
商品展示：在电商网站中分页显示商品列表。
数据报表：在数据分析平台中分页显示数据表格。

可能遇到的问题及解决方法

内容加载缓慢：如果内容过多，可以考虑使用虚拟滚动技术，只渲染可见区域的内容。
分页按钮过多：可以通过“上一页”和“下一页”按钮结合页码跳转来优化分页控件。

通过以上步骤和示例代码，你可以实现一个基本的分页功能，并根据具体需求进行扩展和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

今日作业 -- 用js控制DIV的显示隐藏

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主要有二个，一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，，二是判断条件的选择...，就是用什么来做为if的判断条件，我个人觉得以下这种用字符串来判断，应该是不太OK的。。...OK，今天的作业很简单，就说这么多了。

17.1K6 0

JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)

而我们采用分页显示的话，一页显示10条记录，共十页。用户可以自行翻阅，记录少，清晰显示。下面谈谈分页效果的实现，思路有三种：其一：纯JS实现分页。...一次性查询记录并加载到html的table中。然后通过选择性地显示某些行来达到分页显示的目的。这是一种伪分页，障眼法而已。只能用于数据少的情况下。一旦数据多了，十几万条数据加载到html中会变得很慢。...id="changePages" name="changePages">div> 然后，在JS中修改table中某些行显示，某些行隐藏。...与JS分页不同的是，这里分页每次跳页修改的是遍历的指针，每次跳页都要进行一次全面查询。同样地，不适合大数据量查询。这里比JS分页优化的地方在于——实时性。...跳到第n页才查询、显示第n页内容。要点就是根据客户端表格的“页面”计算出数据库要查询的当前页面的第一条记录的位置。优点：实时性：跳页才查询。数据量小：只加载当前页的记录进行显示。

3.4K3 0

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解。...div的显示和隐藏，但是隐藏后页面显示空白，功能也消失。...("cnt").style.visibility = ""; // 显示盒子的方法演示代码 div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

1020 0

点击导航栏，切换div内容（js+css+html）

大家好，又见面了，我是你们的朋友全栈君。... js

12.7K2 0

DIV的显示与隐藏

文章目录一.不占位二.占位 *********************div的显示和隐藏************************************ 一.不占位 1.隐藏 div对象.style.display...= “none”; 2.显示 div对象.style.display = “block”; 点击的时候,第一次不能正常显示，需要点第二次…为什么?...原因是: 内嵌样式设置了div 的 display: none 在js代码中无法获得内嵌样式display 期望得到none 实质得到"" 所以会出现问题二.占位隐藏 div对象.style.visibility...= “hidden”; 2.显示 div对象.style.visibility = “visible”; div class="axb"> 的 --> div>

5.2K2 0

原生JS实现拖拽进度条显示相应的内容

今天要分享的是运用原生JS实现拖拽进度条显示相应的内容，效果如下：以下是代码实现，欢迎大家复制粘贴。原生JS...实现拖拽进度条显示相应的内容 #parent { width: 400px; height: 20px...目前主要针对的是javascript培训，同时还提供了css教程、javascript 视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服...有数量庞大的案例和多年实战经验； div> div>

4.4K1 0

js文件导入swiper方法及分页器不显示原因

我们查看官方文档，只有通过标签引入swiper轮播库的方法，如果我们想要在js中通过npm包的方式安装和导入，参考以下方法：官方文档：https://www.swiper.com.cn.../ npm文档：https://www.npmjs.com/package/swiper npm包使用方式：https://swiperjs.com/get-started 注意：通过包导入的方式，模版不包含分页器等功能...，使用分页器后会不生效，如需使用分页器，需单独引入 // core version + navigation, pagination modules: import SwiperCore, { Navigation

1.4K1 0

centos打开windows的ftp 无法显示内容显示空白内容

centos下gnome打开windows FTP显示空白，无内容，windows下打开正常。...修改windows FTP的目录浏览列表样式为UNIX，gnome也就可以打开windows FTP显示目录内容了。不清楚到底发生了什么事情。。windows下照样可以访问ftp，没影响。

6.3K1 0

如何通过css控制内容显示顺序第二行的内容优先显示

我们有时进行网页设计时为了想让用户感兴趣的内容优先显示在前，又不想改动代码的先后顺序，要怎么操作呢？...（或者换种说法：源代码中要先看到A再看到B，而视觉上是先B再A）举个简单的例子，想让第二行的内容在不改动代码的情况在视觉上显示在第一行。...如图，左图是正常显示，想让它们对换一下顺序，像右图一样展示出来。 ? ? 　　...我们可以通过div+css的形式来定义　　css中position的absolute(绝对)和relative(相对)两个参数，我们将上面右图的css作如下定义： .bock1 { width:300px...bock2 { width:300px; height:100px; background:#65b6be;position:absolute;top:0;} 　　保存，刷新一下页面试试，是不是你想要看到的效果了

2.9K6 0

原生JS实现拖拽进度条、滚动鼠标显示相应的内容

今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下： ? 以下是代码实现，欢迎大家复制粘贴。显示相应的内容 #parent { width: 400px; height...var scale = l / (oParent.offsetWidth - oDiv.offsetWidth); //让Div3随着滚动的距离上下滑动显示内容...目前主要针对的是javascript培训，同时还提供了css教程、javascript 视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服...有数量庞大的案例和多年实战经验； div> div>

4.9K2 0

带左右箭头切换div的js 原

(adsbygoogle = window.adsbygoogle || []).push({});

12.5K3 0

asp.net中长内容自动分页的实现

在一篇文章过长时,可以自动的写个小程序对其进行分页....private string str;//字符 private int strl;//字符总长度 private int pagesize;//每页显示的字符数...,最后一页的设置,如字符长13,每页3,则处理最后那一页的显示 { for(int i=1;i<=(strl/pagesize)+1;i+...,strl-(ct-1)*pagesize); Response.Write(s); } else //在不被整除的情况下其他页面的显示设置...; } } } 本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点

1.1K1 0

显示农历的js代码

<html xmlns="http://www.w3.org/1999/xhtml"> js 显示农历

18.9K0 0

和设置div宽度，并居中显示。嵌套div的里层div文字居中显示

要实现下图所示的效果：代码： js"> $(document...="width:600px;"> div 元素的内容不会显示出来！...div> div> 显示结果：总结：使用标签前要了解此标签的属性有哪些，比如span标签没有width属性，所以即使设置了宽度也不会起作用，...3，嵌套div的里层div文字居中显示 div align="center" style="display:inline-black; float:left; margin-top:50px;width

5.5K1 0

JS实现div块的拖放，调换位置

主要是HTML5 的拖放（Drag 和 Drop）例子（不需要对div设置ID）： div> div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)...div> div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)...: 当放置被拖数据时，会发生 drop 事件，这里自定义drop(event,this)函数,互换两个的innerHTML ondragover:当拖动链接等有默认事件的元素时，要在ondragover...在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。

6.7K2 0

JqGrid分页按钮图标不显示的bug

开发中遇到的一个小问题，记录一下，如果有朋友也遇到了相同的问题，可以少走些弯路少花点时间。...如图：分页插件使用了JqGrid，但是分页栏里出现了问题，上一页、下一页这些按钮的图标都显示为空，记得以前没有这种问题的。...最终还是找到了问题，首先，JqGrid分页按钮的图标css样式使用的是glyphicon，glyphicon是收费的，在bootstrap4这个版本中glyphicon就被移除掉了，如果引入的文件是bootstrap4...或者以上版本的话，JqGrid分页按钮图标不显示的bug应该都存在，bootstrap3是没问题的。...因此，解决方案有两种，一是更换版本使用bootstrap3，二是更改bootstrap4版本的css文件，把glyphicon的相关样式从bootstrap3中复制到bootstrap4中，这样就可以看到分页图标啦

2.2K4 0

JS 获取所有相同class的div，并遍历

Again，这个问题对于使用mvvm框架，例如vue，weex和angular 是任何难度的因为他们的dom都是直接用js生成控制的，在生成之初就直接处理好久好了。...但是对于普通的js来说，这就很麻烦了。...不过很好，JQuery已经帮我们集成了一个方法.each() 例如你想要遍历class为rffanlab的那么你可以这么做 $(".rffanlab").each(function(){ // do...something here // $(this) 代表当时被遍历循环的元素 }) 虽然jquery是上一个时代的产物，但是不可否认他也给我们做出来非常多的贡献，让我们操作dom时不至于捉襟见肘，时常需要自己去实现

14K2 0

jquery分页插件pagination.js的使用

1、引入jQuery和jQuery.pagination.js文件 js/jquery-1.11.3.js">...js/jquery.pagination.js"> 2、自定义分页插件 $(function(){ $('#...id="pagination"> div> 6、最终结果 ?...参数配置参数默认值说明 pageCount 9 总页数 totalData 0 数据总条数 current 1 当前第几页 showData 0 每页显示的条数 prevCls 'prev' 上一页...是否一直显示上一页下一页 homePage '' 首页节点内容，默认为空 endPage '' 尾页节点内容，默认为空 jump false 是否开启跳转到指定页数，值为boolean类型 jumpIptCls

5.6K1 0

数组或对象中的内容间隔显示

会在5秒中之后几个数字几乎一起显示，并不是我们希望的间隔5秒显示一个数字。...下面是数组和对象间隔显示的代码数组的第一种方法 var i = 0; //在外面定义一个变量作为判断的标准 var arr = [1, 2, 3, 4, 5] var timer...，所以当i的值大于数组的长度-1的时候，清除定时器 clearInterval(timer); } }, 1000); 数组的第二种方法（用setTimeout...执行间隔显示的效果） var i = 0; //在外面定义一个变量作为判断的标准 var arr = [1, 2, 3, 4, 5] showNum() function...= arr.length) i = 0 setTimeout(function() { showNum() }, 1000) } 对象的间隔显示

4.3K2 0

CSS overflow 内容溢出时的显示方式

自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值描述 visible 默认值。...内容不会被修剪，溢出部分会呈现在元素框之外 hidden 内容被修剪，溢出部分不可见 scroll 内容被修剪，无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条...class="container"> div class="item">1div> div class="item">2div> div class="item">3div> div...class="item">4div> div class="item">5div> div> macOS 中滚动条的默认样式: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式

2.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭