Question

我喜欢14页，例如page1，page2，page3，page4，page 5，page 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>

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

1 个答案: