直接修改页面上的样式用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();" onclick="changepage('+lpage+')" >上一页</a>';

if(page<totalpage)

pagestr+='<a href="javascript:void();" onclick="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