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

Question

我有14个页面，例如page1，page2，page3，page4，页面5，页面6。现在页面1是默认通过加载加载的。page1有加载下一页的链接。在page2上，它有返回到第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>