将内容加载到已加载内容的 div 中，依此类推

Question

我有 14 个页面，例如第 1 页、第 2 页、第 3 页、第 4 页、第 5 页、第 6 页。现在默认情况下通过加载加载第 1 页。 page1 具有加载下一页的链接。在第 2 页上，它具有返回第 1 页并移动到下一页第 4 页的链接，而无需刷新只是加载等等。

所以现在我需要一个代码用于每次加载的下一个和上一个链接，我还有一个第 10 页，其中包含所有加载页面的链接，它也应该被加载。 我用于负载的代码。但它最多只能工作 2 个负载。我需要通过具有下一个和上一个链接的所有页面以及所有链接的一个加载页面进行加载。我已经准备好 html 和 css 需要 js 的帮助。谢谢

 $(function(){
      $('.modal-body').load('pages/page1.html', function(){
        //load your second set of html here with another load.
        $('.changed').click(function(){
             var page = $(".changed").attr('href');
            console.log(page);
            var loaded = $('.modal-body').load('pages/' + page + '.html');
            return false;
          });
    });

    });

每个加载的页面都有类似的链接

<a href="changed">Next</a>

任何帮助将不胜感激。我已经有一个导航在加载的内容之外工作。但我也需要在每个新加载的页面中导航。

Answer 1

您可以在 Javascript 中放置一个页面计数器。而且您可以使用事件委托，这样您就不需要每次重新加载正文时都绑定新的处理程序。

$(function(){
  $('.modal-body').load('pages/page1.html'); // Load page 1 at start
  var curPage = 1;
  $(document).on("click", ".nextpage", function() {
    curPage++;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
  $(document).on("click", ".prevpage", function() {
    curPage--;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
});

HTML 应该有：

<a class="prevpage" href="#">Previous</a> <a class="nextpage" href="#">Next</a>