前端（分页导航）

最新推荐文章于 2021-07-28 22:23:47 发布

Cyngn

最新推荐文章于 2021-07-28 22:23:47 发布

阅读量1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Cyngn/article/details/80521123

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一次写博客有点小紧张，从这个例子开始我要正式开始我的前端学习之旅，以后会发表更多的文章，请各位大神指点一下。谢谢哦！

html:

<!DOCTYPE html>

</html>

css:

.page{
   font-size:20px;
   padding:0 89px;
}

.page ul li{
   float: left;
   list-style-type: none;
   border: 1px solid #CCCCCC;
   width: 36px;
   height:36px;
   line-height: 36px;
   margin-left: 20px;
   text-align: center;
}

.page .active{
   border: none;
   font-size:16px;
}
.page .active:hover{
   border: none;
   background-color: #fff;
}

.page .prev,.page .next{
   width: 89px;
}

.page ul li:hover{
   border:1px solid #38f;
   background-color: #B0E0E6;
}

.page .prev{
   display: none;

}

jq:

$(function(){

   var ul = $("ul");//获取ul元素
    var ulList = ul.children();//获取li的个数

   //点击页码
   $(".page ul .pc").click(function(){

       $(this).addClass("active").siblings(".pc").removeClass("active");
       if($(".pc").text() !== ulList.length-8){
           $(".prev").show();
       }

       //上一页
       if($(".page .active").text() == ulList.length -8){
           $(".prev").hide();
       }else{
           $(".prev").show();
       }

       //下一页
        if($(".page .active").text() == ulList.length -2){
           $(".next").hide();
       }else{
           $(".next").show();
       }

   });

   //点击下一页
   $(".next").click(function(){
       $(".page .active").removeClass("active").next().addClass("active");
       $(".prev").show();
       if($(".page .active").text() == ulList.length -2){
           $(".next").hide();
       }else{
           $(".next").show();
       }
   });

   //点击上一页
   $(".prev").click(function(){
       $(".page .active").removeClass("active").prev().addClass("active");
       $(".next").show();
       if($(".page .active").text() == ulList.length -8){
           $(".prev").hide();
       }else{
           $(".prev").show();
       }
   });

});

效果图：

Cyngn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端（分页导航）

第一次写博客有点小紧张，从这个例子开始我要正式开始我的前端学习之旅，以后会发表更多的文章，请各位大神指点一下。谢谢哦！html:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;分页导航&lt;/title&gt; &a
复制链接

扫一扫