Question

这是我的网站http://www.damianplisko.com 我希望有一个上一个和下一个按钮，可以在我的html投资组合页面之间切换。如果用户在我的一个porftfolio页面上，他们所要做的就是点击下一步，然后将它们带到下一个投资组合页面而不是机动回到主菜单。无论如何使用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];
        }
    });

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

2 个答案: