用客户端js实现带省略号的分页
用客户端js实现带省略号的分页
发布时间:2017-01-14 来源:查字典编辑
摘要:复制代码代码如下:$(function(){varn=$('.fenye>ulli:nth-child').lengthvarc=$(".f...

复制代码 代码如下:

<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>

<ul>

<li href="#"><a href="#"><img src="http://www.jb51.nettemplets/mysite/images/tubiao2.jpg"/></a></li>

<li href="#"><a href="#"><img src="http://www.jb51.nettemplets/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>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="http://www.jb51.nettemplets/mysite/images/tubiao4.jpg"/></a></li>

<li href="#"><a href="#"><img src="http://www.jb51.nettemplets/mysite/images/tubiao5.jpg"/></a></li>

</ul>

</div>

效果图

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类