带有javascript递增url的下一个/上一个href按钮

Next / Prev href buttons with javascript incrementing url

本文关键字：上一个 href 按钮 下一个 javascript 递增 url 带有      更新时间：2023-09-26

我是javascript的初学者。我在一个主索引页面上有一个下一个和上一个按钮，我希望每个按钮按顺序转到下一个或上一个html页面。已排序的html页面显示在iframe中。我正在努力找出正确和最有效的方法。

页面按01.html、02.html、03.html等顺序命名。

这是我的纽扣。

<a
    class="btn"
    onclick="decrementPg();"
    href="<script>prvPgURL</script>"
    target="iframe">
    <i class="icon-chevron-left"></i> Back </a>
<a
    class="btn"
    onclick="incrementPg();"
    href="<script>nxtPgURL</script>"
    target="_blank"> Next
    <i class="icon-chevron-right"></i> </a>

这是我的头标签之间的Javascript，我肯定这是完全错误的。

<script language="javascript" type="text/javascript">
var curPg = 0;
var nxtPg = 1;
var prvPg = 0;
var nxtPgURL = "0"+nxtPg+".html";
var prvPgURL = "0"+curPg+".html";
function incrementPg() {
    if(curPg == 0){
        alert('curPg: == 0');
    curPg = (curPg +1);
    nxtPg = (nxtPg +1); 
    } else {
        alert('curPg: !== 0');
    curPg = (curPg +1);
    nxtPg = (nxtPg +1);
    prvPg = (prvPg +1);
    }
alert('curPg: ' +curPg +', nxtPg: '+ nxtPg +', prvPg: '+ prvPg +', prvPgURL: '+ prvPgURL +', nxtPgURL: '+ nxtPgURL);
}
function decrementPg() {
    if(curPg == 0){
        alert('curPg: == 0');
    curPg = (curPg +1);
    nxtPg = (nxtPg +1); 
    } else {
        alert('curPg: !== 0');
    curPg = (curPg -1);
    nxtPg = (nxtPg -1);
    prvPg = (prvPg -1);
    }
 alert('curPg: ' +curPg +', nxtPg: '+ nxtPg +', prvPg'+ prvPg);
}
</script>

我相信一定有一种更简单的方法可以做到这一点。

仅仅模拟javascript中的后退和前进按钮就需要做很多工作。使用历史对象会容易得多。

使用window.history.forward()和window.history.back()。参考

除此之外，如果你坚持以艰难的方式去做，你想做的是：

var n = 0;
function browserButton(value) {
    window.open((n + value) + '.html', _self);
}

在html中，只需将+1或-1传递给browserButton。像这样

<a href="#" alt="back button" onclick="browserButton(-1)">
<a href="#" alt="forward button" onclick="browserButton(1)">

参考。

相关文章：