先上图说明功能 1. 2. 3. 4. 5. 功能如图 现在上代码: JS部分基于jquery框架 页面部分: <div class="bossBox"> <div class="bossBox_1"> <% For i=1 to totalPage'分页页脚生成"[1],[2],[3]....." %> <a class="airfoot" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="air(<%=(i-1)%>);" style="display:none">[<%=i%>]</a> <% htrml = htrml & "<option value="""&i&""">"&i&"</option>" Next %> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="air(0);" style="display:inline-block" mce_style="display:inline-block">首页</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="prepage();" style="display:inline-block" mce_style="display:inline-block">上页</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="nextpage();" style="display:inline-block" mce_style="display:inline-block">下页</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="air(<%=totalPage-1%>);" style="display:inline-block">尾页</a> 转到第<select onChange="javascript:air(this.options[this.selectedIndex].value-1);"> <%=htrml%> </select>页 </div> </div> js部分: var page=0; var bb; bb=0; var totalPage; totalPage=$('.airfoot').length-1; $('.air:first').css('display','block'); $('.airfoot:first').css('color','#F00'); $('.airfoot').each(function(i){ if(i>4) return; else $(this).css('display','inline-block') }); function changePage(aa){ $('.airfoot').each(function(i){ $(this).css('display','none') }); if(aa<=2) aa=2 else if(aa>=totalPage-2) aa=totalPage-2 for (i=0;i<5;i++){ $(".airfoot:eq("+(aa-2+i)+")").css('display','inline-block'); } } function air(aa){ bb=aa; changePage(aa); $(".air").each(function(i){ if (i==(aa)) $(this).css('display','block') else $(this).css('display','none') }); $(".airfoot").each(function(i){ if (i==(aa)) $(this).css('color','#F00') else $(this).css('color','#666') }); totalpage = aa; } function prepage(){ if (bb-1<0) bb=0; else bb = bb-1; air(bb); } function nextpage(){ if (bb+1>totalPage) bb = totalpage; else bb=bb+1; air(bb); } CSS样式: .bossBox_1 select{ position:relative; right:0px;} .bossBox_1{ width:430px; height:20px; height:auto; text-align:right;} .bossBox_1 a{ float:left; width:23px; height:20px; margin-left:5px;} .bossBox_1 .airfoot1{width:40px; height:20px;} .bossBox_1 a:hover{text-decoration:underline} 有什么问题加我QQ:815762641 ^0^