javascript - 使用后退和下一个按钮在 html 页面之间切换

Question

这是我的网站http://www.damianplisko.com 我想要一个上一个和下一个按钮，可以在我的 html 投资组合页面之间切换。如果用户在我的投资组合页面之一上，他们所要做的就是单击下一步并它会将他们带到下一个投资组合页面，而不是返回主菜单。无论如何要使用js来做到这一点？

Answer 1

由于您没有使用 CMS（我推荐），因此在不使用 AJAX 或任何外部库的情况下，我能想到的最简单的解决方案是按照您希望它们显示的顺序创建一个包含所有页面的数组。

var pages = [
  'MedTech.html',
  'Trainer.html',
  'YoungGuns.html',
  ...
];

然后，您可以通过抓取当前页面并检查下一个页面来设置您的新 URL。

var next = document.getElementById('next'); // your DOM element

next.addEventListener('click', function() {

  var current = location.pathname, // current page ie. MedTech.html
      idx = pages.indexOf( current ); // find page in pages array

  // go to next page if page exists
  // otherwise go to first page   
  if ( idx > -1 ) {
    location.pathname = pages[ ++idx ] || pages[0];
  }

});

对于“后退”按钮，您可以简单地使用历史记录或调整上面的功能。

编辑：idx > -1如果您确保数组中的所有页面都确实存在，您可以在不检查的情况下逃脱。

Answer 2

使用 jquery 执行此操作的另一种方法是：

    var pages = ['page1.html', 'page2.html', 'page3.html'];

    $(".nav-button").on('click', function () {
        var currentPage = location.pathname,
            idx = pages.indexOf(currentPage),
            newIndex, failOver;
        if (idx > -1) {
            newIndex = $(this).hasClass("next") ? ++idx : --idx;
            failOver = $(this).hasClass("next") ? 0 : 2;
            location.pathname = pages[newIndex] || pages[failOver];
        }
    });