用jQuery编的一个分页小代码

时间：2023-03-08 22:09:35
 <!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>

相关文章