<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>aaaaa</title> <style> a{display:block;float:left;margin-right:8px;} .spn{display:block;float:left;} </style> <script src="./jquery.js"></script> <script type="text/javascript"> $(function(){ var $a=$("a"); var l=$a.length; var s=11;//能出现个数 var h=Number(l)-Number(1);//索引上限 if(l>20){ $a.slice(s,h).hide();//初始化隐藏 $a.filter(":hidden").prev("a:visible").after("<span class='spn'>…</span>"); $a.click(function(){ var x=$(this).text(); var up=Number(x)+Number(5); var down=Number(x)-Number(5); //var y=Number(x)+Number(5); //alert($("a:eq(z)").text()); $("span").remove(); $a.filter(":not(:last):not(:first)").hide().filter(function(){ range=$(this).text(); if(range>down && range<up) return true; }).show(); $a.filter(":hidden").prev("a:visible").after("<span class='spn'>…</span>"); return false; }); } }); </script> </head> <body> <a href="http://localhost/?tag=1">0</a> <a href="http://localhost/?tag=2">1</a> <a href="http://localhost/?tag=3">2</a> <a href="http://localhost/?tag=4">3</a> <a href="http://localhost/?tag=5">4</a> <a href="http://localhost/?tag=6">5</a> <a href="http://localhost/?tag=7">6</a> <a href="http://localhost/?tag=8">7</a> <a href="http://localhost/?tag=9">8</a> <a href="http://localhost/?tag=10">9</a> <a href="http://localhost/?tag=11">10</a> <a href="http://localhost/?tag=12">11</a> <a href="http://localhost/?tag=13">12</a> <a href="http://localhost/?tag=14">13</a> <a href="http://localhost/?tag=15">14</a> <a href="http://localhost/?tag=16">15</a> <a href="http://localhost/?tag=17">16</a> <a href="http://localhost/?tag=18">17</a> <a href="http://localhost/?tag=19">18</a> <a href="http://localhost/?tag=20">19</a> <a href="http://localhost/?tag=21">20</a> <a href="http://localhost/?tag=22">21</a> <a href="http://localhost/?tag=23">22</a> <a href="http://localhost/?tag=24">23</a> <a href="http://localhost/?tag=25">24</a> <a href="http://localhost/?tag=26">25</a> <a href="http://localhost/?tag=27">26</a> <a href="http://localhost/?tag=28">27</a> <a href="http://localhost/?tag=29">28</a> <a href="http://localhost/?tag=30">29</a> <div class="txt"></div> </body> </html>