分页。如何通过点击数字在页面之间移动

以下是一个使用JavaScript实现分页功能的示例代码：

HTML部分：

<div id="pagination">
  <span class="page-num">1</span>
  <span class="page-num">2</span>
  <span class="page-num">3</span>
  <span class="page-num">4</span>
  <span class="page-num">5</span>
</div>

CSS部分：

.page-num {
  cursor: pointer;
  padding: 5px;
}
.active {
  background-color: #ccc;
}

JavaScript部分：

var pageElements = document.getElementsByClassName("page-num");

// 初始页面显示第一页
showPage(1);

// 为每个页码添加点击事件
for (var i = 0; i < pageElements.length; i++) {
  pageElements[i].addEventListener("click", function() {
    // 移除之前激活的页码样式
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    // 添加激活样式到当前点击的页码
    this.className += " active";
    // 显示对应的页面
    var pageNumber = parseInt(this.textContent);
    showPage(pageNumber);
  });
}

function showPage(pageNumber) {
  // 根据页码显示对应的页面内容
  console.log("显示页面 " + pageNumber);
  // 这里可以根据实际需求，进行页面内容的更新操作
}

在这个示例中，我们首先给每个页码元素添加了一个点击事件监听器。当点击页码时，我们会获取被点击的页码数字，然后根据这个数字执行相应的操作。在这个示例中，我们只是简单地在控制台输出了被点击的页码，你可以在showPage函数中添加实际需要执行的操作，比如更新页面内容等。

点击页码时，我们还会为被点击的页码添加一个active类，以区分当前页码的样式。这样，你可以根据需要自定义不同样式来表示当前页码。

希望这个示例能够帮助到你实现分页功能！