js+css实现的简单易用兼容好的分页

yizhihongxing

这里是“js+css实现的简单易用兼容好的分页”的完整攻略:

什么是分页

分页指的是将大量数据分成多个页面,每次只显示其中的一部分数据,通过点击下一页或上一页来切换页面。常见的应用包括商城商品列表、新闻列表等。

分页的实现

HTML

首先,我们需要在HTML页面中添加分页的DOM结构。一般来说,分页的结构包含上一页、下一页、页码数等元素。

<div class="pagination">
  <a href="#" class="prev-page">上一页</a>
  <ul class="page-list">
    <li class="page-item active">1</li>
    <li class="page-item">2</li>
    <li class="page-item">3</li>
    <li class="page-item">4</li>
    <li class="page-item">5</li>
  </ul>
  <a href="#" class="next-page">下一页</a>
</div>

CSS

接下来,我们需要为分页元素添加CSS样式以及交互动效。这里提供一组简单易用兼容好的分页样式:

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.pagination a, .pagination li {
  display: inline-block;
  padding: 5px 15px;
  margin-right: 5px;
  font-size: 14px;
  color: #444;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.pagination li.active {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}
.pagination a:hover, .pagination li:hover {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}
.pagination li:first-child, .pagination li:last-child {
  margin-right: 0;
}

JavaScript

最后,我们需要在JavaScript中实现分页的交互功能。这里提供一组简单易用兼容好的分页代码:

// 获取分页元素
const pagination = document.querySelector('.pagination');
const prevBtn = pagination.querySelector('.prev-page');
const nextBtn = pagination.querySelector('.next-page');
const pageList = pagination.querySelector('.page-list');
const pageItems = pageList.querySelectorAll('.page-item');

// 当前页码
let currentPage = 1;

// 设置下一页事件
nextBtn.addEventListener('click', () => {
  if (currentPage < pageItems.length) {
    currentPage++;
    updatePagination();
  }
});

// 设置上一页事件
prevBtn.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    updatePagination();
  }
});

// 设置页码点击事件
pageItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    currentPage = index + 1;
    updatePagination();
  });
});

// 更新分页元素状态
function updatePagination() {
  pageItems.forEach((item, index) => {
    if (index === currentPage-1) {
      item.classList.add('active');
    } else {
      item.classList.remove('active');
    }
  });
}

这个区域通过显示5个页码数和上一页、下一页链接组成了一个分页组件。可以通过上述JavaScript代码实现JS对分页组件的控制,保证分页组件在点击上一页和下一页时、页码数的点击时样式和数据随之改变。

示例说明

示例1:商城商品列表分页

假设我们正在开发一个电商网站,在商品列表页面需要使用分页功能。我们可以使用上述代码,在HTML页面中添加相应的DOM结构和CSS样式,然后使用JS来控制分页组件的交互功能。

当用户点击上一页、下一页或页码数时,JS会根据当前的页码数切换到对应的页面,同时也会更新分页组件的样式以提示用户当前所在页面。

示例2:新闻列表分页

又假设我们正在开发一个新闻网站,在新闻列表页面同样需要使用分页功能。我们可以复制上述代码,在HTML页面中添加相应的DOM结构和CSS样式,然后使用JS来控制分页组件的交互功能。

同样地,当用户点击上一页、下一页或页码数时,JS会根据当前的页码数切换到对应的页面,同时也会更新分页组件的样式以提示用户当前所在页面。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js+css实现的简单易用兼容好的分页 - Python技术站

(0)
上一篇 2023年6月16日
下一篇 2023年6月16日

相关文章

  • springboot多环境(dev、test、prod)配置详解

    在Spring Boot应用程序中,我们通常需要在不同的环境中配置不同的属性,例如数据库连接、日志级别等。以下是实现Spring Boot多环境配置的完整攻略: 创建配置文件 在Spring Boot应用程序中,我们可以使用不同的配置文件来配置不同的环境。以下是一个示例: application-dev.properties:开发环境配置文件。 applic…

    Java 2023年5月15日
    00
  • SpringMVC RESTFul实战案例访问首页

    下面是关于“SpringMVC RESTFul实战案例访问首页”的完整攻略,包含两个示例说明。 SpringMVC RESTFul实战案例访问首页 SpringMVC是一个流行的Java Web框架,它可以帮助我们更加方便地构建Web应用程序。本文将介绍如何使用SpringMVC构建一个RESTFul风格的Web应用程序,并访问首页。 步骤一:创建Sprin…

    Java 2023年5月17日
    00
  • C语言数学问题与简单DP01背包问题详解

    C语言数学问题与简单DP01背包问题详解 数学问题 在C语言中,常见的数学问题包括但不限于: 求最大公约数和最小公倍数 求整数平方根 判断一个数是否为质数 求某个数的阶乘 求组合数和排列数 下面我们将对这些问题逐一进行讲解。 求最大公约数和最小公倍数 最大公约数和最小公倍数是数学中非常常见的概念,在C语言中可以通过辗转相除法等算法来进行求解。以下是求最大公约…

    Java 2023年5月26日
    00
  • 如何使用Java编译期注解?

    下面是关于“如何使用Java编译期注解”的完整使用攻略。 什么是编译期注解? 编译期注解是在Java编译期间处理的一种注解,它可以被编译器直接解释和处理。编译器可以识别和处理这些注解,并在编译期执行相应的操作。相比于运行时注解,编译期注解更加高效、可靠和安全。 如何使用Java编译期注解? 使用Java编译期注解需要按照以下步骤进行: 1. 定义注解类 首先…

    Java 2023年5月11日
    00
  • java实现Xml与json之间的相互转换操作示例

    Java实现XML与JSON之间的相互转换操作示例攻略 什么是XML和JSON? XML是一种标记语言,可以用来存储数据,比如RSS或Atom的新闻源、在线计算机配置文件等等。XML文件结构清晰、可读性强,被广泛应用于Web Services、SOAP和其他Web API的数据传输格式。 JSON是一种轻量级的数据交换格式,它具有自我描述性、可读性高、易于理…

    Java 2023年5月26日
    00
  • java读取文件和写入文件的方式(简单实例)

    Java读取文件和写入文件的方式(简单实例) 在Java中读取文件和写入文件是非常常见的操作,通常我们读取一个文件的内容,进行一些处理,然后写入到新的文件中。下面是Java读取文件和写入文件的两种方式,它们在效果上是一样的,只是实现方式不同。 读取文件 方式一:使用BufferedReader import java.io.*; public class R…

    Java 2023年5月20日
    00
  • SpringBoot整合BootStrap实战

    完整攻略: 创建SpringBoot项目 首先,我们需要创建一个SpringBoot项目。打开IDEA,点击“New Project”,选择Spring Initializr,填写项目信息,勾选“Web”和“Thymeleaf”作为依赖,点击“Next”,填写项目的Group和Artifact信息,点击“Finish”创建项目。 引入BootStrap依赖 …

    Java 2023年5月15日
    00
  • Java如何获取List中的String详解

    我来详细讲解一下怎样获取List中的String。 获取List中的String 方法一:for循环遍历获取 最常见的获取List中的String的方法是通过for循环来遍历List中的每一个String,然后依次获取每个String。下面是示例代码: List<String> list = new ArrayList<String>…

    Java 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部