用js实现的带省略号的分页 php

最新推荐文章于 2022-05-25 14:56:40 发布

原创最新推荐文章于 2022-05-25 14:56:40 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

php代码分享同时被 2 个专栏收录

70 篇文章

订阅专栏

js文章

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript优化长列表分页导航的方法。通过隐藏部分页面链接并用省略号代替，保持导航栏简洁易读。同时确保当前页附近的导航项可见，提升用户体验。

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

效果图