直接修改页面上的样式用li 例子 js另类分页 js分页 javascript

直接修改页面上的样式用li 例子
js代码：
<strong>< script language="javascript" >
     var l=$("li");
     var pagenum=10;
     var lens=l.length;
      var totalpage=Math.ceil(lens/pagenum);
     function changepage(page)
     {
     page=parseInt(page);
     if(page<=0)page=1;
     var total=(page-1)*pagenum;
     var bpage=page*pagenum;
     var lpage=page-1;
      var npage=page+1;
     if(total>=lens)total=lens;
     if(bpage>=lens)bpage=lens;
      for(var i=0;i<lens;i++)
     {
        
        if(i>=total && i<bpage)
        {
        l[i].style.display='block';
        }
        else
        {
        l[i].style.display='none';
        }
       
       
     }
    var pagestr='';
    if(page>1)
    pagestr+='<a href="javascript:void();" οnclick="changepage('+lpage+')"  >上一页</a>';
    if(page<totalpage)
    pagestr+='<a href="javascript:void();" οnclick="changepage('+npage+')"  >下一页</a>';
    $("#pages").html(pagestr);
     }
     changepage(1);

     < /script ></strong>

页面的样式是这样的：
<ul id="content" >

< li>测试内容</li>
< li>测试内容</li>
< li>测试内容</li>
< li>测试内容</li>
< li>测试内容</li>
< li>测试内容</li>
< li>测试内容</li>
< li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>

       
< span id="pages" style=" text-align:center" ></ span>                   

</ul >

另外：一定要包含 jquery.js
不过只用到两处也可以直接用js替换
还可以修改每页显示数目

 

更详细信息：http://www.wemaster.com.cn/blog/?p=58