用客户端js实现带省略号的分页

 更新时间:2013年04月27日 14:26:57   作者:  
带省略号的分页只有在服务器端才可以实现,下面为大家介绍的是用js实现的带省略号的分页,感兴趣的朋友可以参考下哈,希望对你写出好的分页有所帮助
复制代码 代码如下:

<script type="text/javascript">
$(function(){
var n =$('.fenye >ul li:nth-child').length
var c=$(".fenye ul li").index($('.fenye ul li.thisclass'))
var setp1=c
var setp2=n-c; //后余
if(n>10){
if(c>2){
for (i=2;i<parseInt(c);i++){
$(".fenye ul li").eq(i).hide()
}
}
for(y=c+5;y<setp2+3;y++){
$(".fenye ul li").eq(y).hide()
}
$(".fenye ul li").eq(n-3).text('...');
}else if(n==10){
$(".fenye ul li").eq(n-3).text('...');
}

})
</script>
<div class="fenye">
<ul class="clear">
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao2.jpg"/></a></li>
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao3.jpg"/></a></li>
<li><a href='list_3_14.html'>141</a></li>
<li><a href='list_3_14.html'>1432</a></li>
<li><a href='list_3_14.html'>143</a></li>
<li><a href='list_3_14.html'>143</a></li>
<li class="thisclass">13</li>
<li><a href='list_3_14.html'>14</a></li>
<li><a href='list_3_11.html'>11</a></li>
<li><a href='list_3_15.html'>1512</a></li>
<li><a href='list_3_15.html'>1513</a></li>
<li><a href='list_3_15.html'>151</a></li>
<li><a href='list_3_15.html'>151</a></li>
<li><a href='list_3_15.html'>152</a></li>
<li><a href='list_3_15.html'>152</a></li>
<li><a href='list_3_15.html'>152</a></li>
<li><a href='list_3_15.html'>152</a></li>
<li><a href='list_3_15.html'>153</a></li>
<li><a href='list_3_15.html'>154</a></li>
<li><a href='list_3_15.html'>155</a></li>
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao4.jpg"/></a></li>
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao5.jpg"/></a></li>
</ul>
</div>

效果图

相关文章

  • TypeScript装饰器与反射元数据实例详解

    TypeScript装饰器与反射元数据实例详解

    TypeScript的装饰器为我们提供了一种强大的工具,可以在运行时改变类的行为,通过理解装饰器的工作原理,我们可以创造更加强大、灵活且易于维护的应用,这篇文章主要介绍了TypeScript装饰器与反射元数据,需要的朋友可以参考下
    2023-09-09
  • 详解简单易懂的 ES6 Iterators 指南和示例

    详解简单易懂的 ES6 Iterators 指南和示例

    这篇文章主要介绍了详解简单易懂的 ES6 Iterators 指南和示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JS实现仿腾讯微博无刷新删除微博效果代码

    JS实现仿腾讯微博无刷新删除微博效果代码

    这篇文章主要介绍了JS实现仿腾讯微博无刷新删除微博效果代码,涉及JavaScript实现Ajax无刷新删除的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript中数据结构与算法(二):队列

    JavaScript中数据结构与算法(二):队列

    这篇文章主要介绍了JavaScript中数据结构与算法(二):队列,队列是只允许在一端进行插入操作,另一个进行删除操作的线性表,队列是一种先进先出(First-In-First-Out,FIFO)的数据结构,需要的朋友可以参考下
    2015-06-06
  • JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。
    2010-07-07
  • JavaScript设计模式之单例模式详解

    JavaScript设计模式之单例模式详解

    这篇文章主要为大家详细介绍了JavaScript设计模式之例模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 深入浅出ES6之let和const命令

    深入浅出ES6之let和const命令

    这篇文章主要介绍了ES6中let和const命令的相关资料,非常不错,具有参考借鉴价值,对es6 let const相关知识感兴趣的朋友一起看下吧
    2016-08-08
  • JavaScript中的concat()方法的用法详解

    JavaScript中的concat()方法的用法详解

    在 JavaScript 中,数组和字符串都是常用的数据结构,在实际开发中,操作数组和字符串是非常频繁的任务,concat() 方法就是用于合并数组或字符串的一种常见方法,在本文中,我们将详细探讨 concat() 方法的用法和示例,需要的朋友可以参考下
    2024-11-11
  • JavaScript验证知识整理

    JavaScript验证知识整理

    本文主要介绍了JavaScript验证的相关知识整理。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • javascript递归回溯法解八皇后问题

    javascript递归回溯法解八皇后问题

    网上看到许多关于八皇后算法的文章,很少能看到使用javascript来实现的,今天就给大家使用javascript来解决下这个问题,有需要的小伙伴可以参考下。
    2015-04-04

最新评论