javascript - 使用后台 jquery 进行导航

Question

我在页面中有一个 anchor 标记列表，单击该 anchor 标记时，它将根据已定义的 href 导航到另一个页面。

现在，导航到第二页后，我将有几个 anchor 标记，再次单击每个 anchor 标记时，它将导航到相应的 href 页面。

现在，单击后退按钮时，它应该导航到上一页，即第二页，再次单击后退按钮时，它将导航到第一页。

任何人都可以帮我解决如何以通用方式实现此目的，这样如果有三个导航而不是两个导航也应该可以工作。

这是我尝试过的。

标题:

<button id='back'>Back</button>

第 1 页:

<ul class='list'>
<li><a href='/page1/anchor1'>Page 1 Anchor1</a></li>
<li><a href='/page1/anchor2'>Page 1 Anchor2</a></li>
<li><a href='/page1/anchor3'>Page 1 Anchor3</a></li>
<li><a href='/page1/anchor4'>Page 1 Anchor4</a></li>
<li><a href='/page1/anchor5'>Page 1 Anchor5</a></li>
</ul>

第 2 页:

<ul class='list'>
<li><a href='/page2/anchor1'>Page 2 Anchor1</a></li>
<li><a href='/page2/anchor2'>Page 2 Anchor2</a></li>
<li><a href='/page2/anchor3'>Page 2 Anchor3</a></li>
<li><a href='/page2/anchor4'>Page 2 Anchor4</a></li>
<li><a href='/page2/anchor5'>Page 2 Anchor5</a></li>
</ul>

第 3 页:

<ul class='final'>
<li>Page 3 Anchor1</li>
<li>Page 3 Anchor2</li>
<li>Page 3 Anchor3</li>
<li>Page 3 Anchor4</li>
<li>Page 3 Anchor5</li>
</ul>

Js:

$(document).ready(function() {
        setTimeout(function(){
            // Having the array of href
            var rList = $('.list li a');
            purl = [];
            var aurl = [];
            for(var i=0;i<rList.length;i++){
                arl = rList[i].href;
                purl.push(aurl);
            }

        },500);

        $("#back").click(function(){


        });

    });

Answer 1

使用https://developer.mozilla.org/en-US/docs/Web/API/History

$("#back").click(function(){
        history.back();
    });