JS实现静态页面上一页下一页效果

JS实现静态页面上一页下一页效果。不是那个返回到上一页那个, 不是要<a href="javascript:history.back()">这个。。
我的页面命名是这样:paper78-01-01.htm paper78-01-02.htm paper78-01-03.htm 以此类推,我想在02页的时候 点上一篇就到01页 点下一篇就到03页。。 静态页面上 怎么加代码·?

思路:页面中放一个隐藏变量记录当前的页面序号,下一页就是取出当前号+1,上一页就取出当前号-1;

下面是html为paper78-01-01.htm的代码,<input type="hidden" name="pagenumber" value="01">的value="01",
paper78-01-02.htm,paper78-01-03.htm就是将value换成02,03即可。

<html>
<head>
</head>
<body>
paper78-01-01.htm
<input type="hidden" name="pagenumber" value="01">
<a href="javascript:goPrevious()">上一页<a/><a href="javascript:goNext()">下一页<a/>
<script type="text/javascript">
//下一页
function goNext(){
goPage(parseInt(document.all.item("pagenumber").value)+1);
}
//上一页
function goPrevious(){
goPage(parseInt(document.all.item("pagenumber").value)-1);
}

//进入页号为pageNumber的页面
function goPage(pagenumber){
if(pagenumber<1) {alert("到了首页");return;}
if(pagenumber>3) {alert("到了第三页了");return;}
if(pagenumber<10) pagenumber = "0"+pagenumber;
window.location.href="paper78-01-"+pagenumber+".htm";
}
</script>
</body>
<html>
温馨提示:答案为网友推荐,仅供参考
第1个回答  2019-06-19
思路:页面中放一个隐藏变量记录当前的页面序号,下一页就是取出当前号+1,上一页就取出当前号-1;<br><br>下面是html为paper78-01-01.htm的代码,<input type="hidden" name="pagenumber" value="01">的value="01",<br>paper78-01-02.htm,paper78-01-03.htm就是将value换成02,03即可。<br><br><html><br> <head><br> </head><br> <body><br> paper78-01-01.htm<br> <input type="hidden" name="pagenumber" value="01"><br> <a href="javascript:goPrevious()">上一页<a/><a href="javascript:goNext()">下一页<a/><br> <script type="text/javascript"><br> //下一页<br> function goNext(){<br> goPage(parseInt(document.all.item("pagenumber").value)+1);<br> }<br> //上一页<br> function goPrevious(){<br> goPage(parseInt(document.all.item("pagenumber").value)-1);<br> }<br><br> //进入页号为pageNumber的页面<br> function goPage(pagenumber){<br> if(pagenumber<1) {alert("到了首页");return;}<br> if(pagenumber>3) {alert("到了第三页了");return;}<br> if(pagenumber<10) pagenumber = "0"+pagenumber;<br> window.location.href="paper78-01-"+pagenumber+".htm";<br> }<br> </script><br> </body><br><html>

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网