html+css+js实现Pagination 分页

太阳花ˉ

于 2024-09-28 13:16:32 发布

阅读量280

点赞数 1

分类专栏：前端学习组件练习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62831076/article/details/142614515

版权

前端学习同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

组件练习

13 篇文章 0 订阅

订阅专栏

效果图

HTML部分

<body>
  <div class="pagination">
    <button class="prev"><</button>
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <button class="next">></button>
  </div>
</body>

CSS部分

<style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .pagination{
      margin: 50px auto;
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 50px;
      /* background-color: pink; */
    }
    .pagination ul{
      display: flex;
      flex: 1;
      justify-content: space-between;
      list-style: none;
      line-height: 50px;
      padding: 0 20px;
    }
    .pagination ul li{
      font-weight: 550;
      font-size: 18px;
      cursor: pointer;
    }
    .pagination ul li.active,
    .pagination ul li:hover{
      color: #409eff;
    }
    .pagination button{
      display: block;
      border: none;
      background-color: transparent;
      width: 50px;
      font-size: 20px;
    }
    button{
      cursor: pointer;
    }
    button:disabled{
      color: #c0c4cc;
      cursor: not-allowed;
    }
    button:hover{
      color:#409eff ;
    }
  </style>

JS部分

<script>
  // 1.next
  const next =document.querySelector('.next')
  let i =1
  next.addEventListener('click',function(){
    i++
    // i = i>5 ? 5 : i
    if(i>=5){
      i=5
      this.disabled = true;
      prev.disabled = false;
      // console.log('next-',this.disabled,this);
    }else{
      this.disabled = false;
      prev.disabled = false;
      // console.log('next-',this.disabled,this);
    }
    document.querySelector('.active').classList.remove('active')
    document.querySelector(`li:nth-child(${i})`).classList.add('active')
  })
  const prev=document.querySelector('.prev')
  // 2.prev
  prev.addEventListener('click',function(){
    i--
    // i = i<1 ? 1 : i
    if(i<=1){
      this.disabled = true;
      next.disabled = false;
      // console.log('prev-',this.disabled,this);
    }else{
      this.disabled = false;
      next.disabled = false;
      // console.log('prev-',this.disabled,this);
    }
    document.querySelector('.active').classList.remove('active')
    document.querySelector(`li:nth-child(${i})`).classList.add('active')
  })
  const ul=document.querySelector('ul')
  // 3.点击数字
  ul.addEventListener('click',function(e){
    if(e.target.tagName==='LI'){
      document.querySelector('.pagination .active').classList.remove('active')
      e.target.classList.add('active')
    }
  })
</script>