html页面,怎么实现在文本框中输入页码,然后按确定就会跳转到相应页面?比如输入5,就跳转到第5页。 谢谢

html页面,怎么实现在文本框中输入页码,然后按确定就会跳转到相应页面?比如输入5,就跳转到第5页。 谢谢,第1张

<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>

网页链接

看一下这个吧,现在很少有人手动写分页了,一般都是用插件。或者现在主流的前端框架,都有用户量特别大的前端组件库,用起来很方便。其实这个分页手写js并不难,主要是理清逻辑就可以了,能写但是没必要~如果是比较老的前端框架,必须手写js分页逻辑,追问就行,我给你屡屡


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6178181.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存