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

这里是“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会根据当前的页码数切换到对应的页面，同时也会更新分页组件的样式以提示用户当前所在页面。