本文介绍使用原生 JavaScript 实现分页功能，该功能的实现是在已有HTML结构的基础上，而不是使用 URL 的 page 参数实现分页。

如果你要实现从处理JS数据数据生成HTML，然后再使用原生JS实现分页功能请查看：原生JS实现分页功能完整代码

使用原生 JS 实现分页功能功能的步骤：

  • 基于已有HTML结构
  • 使用原生JS实现分页功能

JS分页效果图

JS分页效果图

已有HTML结构

在HTML文件中一个<div class="pa-pg">表示一个页面。本例中使用了Bootstrap CSS 类，方便进行HTML元素的布局。默认显示第一个页面（使用d-block Bootstrap CSS定义显示页面），隐藏其他的页面（使用d-none Bootstrap CSS定义隐藏页面）

HTML具体内容如下：

<div id="pagedArticle" class="paged-article container d-flex flex-column custom-padding">
  <div class="pa-pg d-block">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">PhpStorm破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">原生JS实现分页功能</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">WebStorm破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">IntelliJ IDEA破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">JavaScript为HTML元素删除CSS</h3>
      <p>anxin</p></div>
  </div>
  <div class="pa-pg d-none">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">JavaScript为HTML元素添加CSS</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Markdown代码中进行缩进和换行</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Javascript为元素添加事件监听器</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Pycharm Pro破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">GoLand破解版下载</h3>
      <p>anxin</p></div>
  </div>
  <div class="pa-pg d-none">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">RubyMine破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Adobe Acrobat Pro破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">DataSpell破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Adobe XD CC破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Rider破解版下载</h3>
      <p>anxin</p></div>
  </div>
  <div class="pa-pg d-none">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">网站内容如何使必应快速收录：向Bing提交链接</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">网站内容如何使百度快速收录：向百度提交链接 </h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">FreeBSD 13使用PIP包安装 Let's Encrypt
      Certbot为Apache启用Https</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Ubuntu 如何安装KDE Plasma桌面环境</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">网站中使用本地文件加载Font Awesome 6字体图标</h3>
      <p>anxin</p></div>
  </div>
  <div id="pa-pn" class="pa-pn text-center mt-2">
    <i class="pa-pn-num active">1</i>
    <i class="pa-pn-num">2</i>
    <i class="pa-pn-num">3</i>
    <i class="pa-pn-num">4</i>
  </div>
</div>

使用的自定义的CSS代码

JS分页代码中除了使用Bootstrap CSS类外，使用到的自定义 CSS 代码：

.custom-padding {
  padding: 50px 200px;
}
.pa-pn-num {
  cursor: pointer;
  font-size: 16px;
  font-style: normal;
  margin: 0 5px;
  display: inline-block;
  text-align: center;
  height: 28px;
  line-height: 28px;
  width: 28px;
  border: 1px solid #222;
  border-radius: 17px;
  background: #222;
  color: #fff;
}
.pa-pn-num:hover {
  background: #f4645f;
  border: 0;
}
.pa-pn-num.active, .pa-pn-num.active:hover {
  background: #fff;
  color: #222;
  border: 1px solid #222;
}

原生JS分页代码

基于已有的HTML，只需实现当点击分页的页码时，显示对应的<div class="pa-pg“>内的内容（所有的<div class="pa-pg“>元素相当于一个数组，其在数组中下标与页码所对应），隐藏其他div内的内容。

JS分页代码示例代码如下：

const pagedArticle = document.getElementById('pa-pn');
if (pagedArticle) {
  pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
    item.addEventListener('click', event => {
      const p_num = parseInt(event.currentTarget.textContent) - 1;
      document.querySelectorAll('#pagedArticle .pa-pg').forEach((item, idx, arr) => {
        if (idx == p_num) {
          item.classList.remove('d-none');
          item.classList.add('d-block');
        }
        else {
          item.classList.remove('d-block');
          item.classList.add('d-none');
        }
      });
      pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
        item.classList.remove("active");
      });
      event.currentTarget.classList.add("active");
    });
  });
}

JS分页完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.3.1/css/bootstrap.min.css">
  <title>JS分页代码</title>
  <style>
    .custom-padding {
      padding: 50px 200px;
    }
    .pa-pn-num {
      cursor: pointer;
      font-size: 16px;
      font-style: normal;
      margin: 0 5px;
      display: inline-block;
      text-align: center;
      height: 28px;
      line-height: 28px;
      width: 28px;
      border: 1px solid #222;
      border-radius: 17px;
      background: #222;
      color: #fff;
    }
    .pa-pn-num:hover {
      background: #f4645f;
      border: 0;
    }
    .pa-pn-num.active, .pa-pn-num.active:hover {
      background: #fff;
      color: #222;
      border: 1px solid #222;
    }
  </style>
</head>
<body>
  <div id="pagedArticle" class="paged-article container d-flex flex-column custom-padding">
    <div class="pa-pg d-block">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">PhpStorm破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">原生JS实现分页功能</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">WebStorm破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">IntelliJ IDEA破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">JavaScript为HTML元素删除CSS</h3>
        <p>anxin</p></div>
    </div>
    <div class="pa-pg d-none">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">JavaScript为HTML元素添加CSS</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Markdown代码中进行缩进和换行</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Javascript为元素添加事件监听器</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Pycharm Pro破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">GoLand破解版下载</h3>
        <p>anxin</p></div>
    </div>
    <div class="pa-pg d-none">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">RubyMine破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Adobe Acrobat Pro破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">DataSpell破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Adobe XD CC破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Rider破解版下载</h3>
        <p>anxin</p></div>
    </div>
    <div class="pa-pg d-none">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">网站内容如何使必应快速收录：向Bing提交链接</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">网站内容如何使百度快速收录：向百度提交链接 </h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">FreeBSD 13使用PIP包安装 Let's Encrypt
        Certbot为Apache启用Https</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Ubuntu 如何安装KDE Plasma桌面环境</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">网站中使用本地文件加载Font Awesome 6字体图标</h3>
        <p>anxin</p></div>
    </div>
    <div id="pa-pn" class="pa-pn text-center mt-2">
      <i class="pa-pn-num active">1</i>
      <i class="pa-pn-num">2</i>
      <i class="pa-pn-num">3</i>
      <i class="pa-pn-num">4</i>
    </div>
  </div>
  <script>
    const pagedArticle = document.getElementById('pa-pn');
    if (pagedArticle) {
      pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
        item.addEventListener('click', event => {
          const p_num = parseInt(event.currentTarget.textContent) - 1;
          document.querySelectorAll('#pagedArticle .pa-pg').forEach((item, idx, arr) => {
            if (idx == p_num) {
              item.classList.remove('d-none');
              item.classList.add('d-block');
            } else {
              item.classList.remove('d-block');
              item.classList.add('d-none');
            }
          });
          pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
            item.classList.remove("active");
          });
          event.currentTarget.classList.add("active");
        });
      });
    }
  </script>
</body>
</html>

总结

本文介绍了使用原生 JavaScript 实现分页功能，本文介绍的JS分页代码是在已有的HTML的基础上，只介绍了JS分页代码。如果你想了解JS如何实现从最开始的将一维数组转换为二维数组，然后再使用原生JS将二维列表生成HTML，最后使用原生JS实现分页功能，请查看文章：JS分页完成代码。