HTML 加页码问题

html-css014

HTML 加页码问题,第1张

可以自己写js来做翻页,根据结果条目数量显示页码,显示当前页的条目,然后对点击页码和点击上下页做click响应事件,显示下一页的条目,如果你会写js的话这个就不是问题了。

如果你用jquery的话推荐这个插件jqPaginator

<SCRIPT language=javascript>

function GoPage(Myself)

{

var Lmyself=Myself.replace(".html","")

if (document.formpage.SkipPage.value == 1)

{window.location.href=Myself} //绝对路径可自己设置

else{

window.location.href=Lmyself+"_"+document.formpage.SkipPage.value+".html"

}

}

</SCRIPT>

<form name="formpage">

第<input name='SkipPage' onKeyDown='if(event.keyCode==13)event.returnValue=false' onchange="if(/

\D/.test(this.value)){alert('请输入需要跳转到的页数并且必须为整数!')this.value='1'}"

style='width: 20pxtext-align:center' type='text' value='1'>页

<input name='submitSkip' type='button' onClick='GoPage(window.location.href)' value='转到'></form>

给你改了一下,如果你的文件名为index.html,第2页就用index_2.html,第3页就用index_3.html即可 这样就可以了

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>

RunJS 演示代码

</title>

<script>

var index = 0

onload = function(){

var as = document.getElementById("p").getElementsByTagName("a")

var pages = document.getElementsByName("page")

for(var i = 0 i < as.length i++){

(function(i){

as[i].onclick = function(){

var html = this.innerHTML.replace(/^\s+|\s+$/g,"")-1

html = i == 0 ? index-1 : html

html = i == as.length - 1 ? index+1 : html

html = html < 0 ? 0 : html

html = html > pages.length - 1 ? pages.length - 1 : html

pages[index].style.display = "none"

pages[html].style.display = "block"

index = html 

}

})(i)

}

}

</script>

  </head>

<body>

    <div name="page">

第一页内容文字

</div>

<div name="page" style="display:none">

第二页内容文字

</div>

<div name="page" style="display:none">

第三页内容文字

</div>

<div style="text-align:right" class="show_page" id="p">

<a href="###">

上一页

</a>

<a href="###">

1

</a>

<a href="###">

2

</a>

<a href="###">

3

</a>

<a href="###">

下一页

</a>

</div>

  </body>

</html>