js实现分页器 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>分页器</title>
  <style>
   .item {
    display: none;
    width: 400px;
    height: 400px;
                position: relative;
   }   

   .item.active {
    display: block;
   }
button{
       background-color:#fffff
        border:0
}
  </style>
 </head>
 <body>
        <div >
   <button class="btn">1</button>
   <button class="btn">2</button>
            <button class="btn">3</button>

  </div>
  <div>
   <div class="item active">这是div1</div>
   <div class="item">这是div2</div>
   <div class="item">这是div3</div>
  </div>

         
 </body>
</html>
<script type="text/javascript">
  //获取按键和div
    var aBtn = document.getElementsByClassName("btn");
    var aIem = document.getElementsByClassName("item");
    var nowPage = 0; //定义当前页，默认值为0


    //封装函数、图片显示的部分、传入获取到的div，和被点击的序号
    function toggle(eles, active) {
        for(var i = eles.length; i--;) {
            eles[i].className = "item"; //先让所有div隐藏
        }
        eles[active].className = "item active";//再让被点击的序号对应的div 显示
    }
；
        
    for(var i = aBtn.length; i--;) {
            aBtn[i].tab = i;
            aBtn[i].onclick=function(){
                toggle(aIem,this.tab);
                nowPage=this.tab; //被点击后，保存当前页的序号
            }
    }
</script>

 

posted @ 2021-12-21 11:29  泡椒pg  阅读(542)  评论(0)    收藏  举报