次へロード機能の前のボタン

Question

ここにHTMLファイルからコンテンツを取り出すロード機能があります。

$('#content').load("pages/sample.html", function(){ 
    //Load Content Using Menu Links 
    $('.main-menu a').click(function(){ 
     var page = $(this).attr('href'); 
     $('#content').load('pages/' + page + '.html'); 
     return false; 

    }); 
}); 

1. 今、私は、各負荷のために次の前のボタンを作成します。何か案が？

Answer 1

あなたはしなければならない：コードが正しく動作するかどうか

コード

• 検証を：あなたはすべてのHTMLファイル名のリストを

  var historyLinks = []; 
  var indexLink = 0; 
  
  $('#content').load("pages/sample.html", function(){ 
      //Load Content Using Menu Links 
      $('.main-menu a').click(function(){ 
       var page = $(this).attr('href'); 
       addLink(page); 
       loadPage(page); 
      }); 
  }); 
  
  $("#previousButton").click(function() { 
      previous(); 
  }); 
  
  $("#nextButton").click(function() { 
      next(); 
  }); 
  
  function loadPage(page) { 
      $('#content').load('pages/' + page + '.html'); 
  } 
  
  function addLink(page) { 
      historyLinks.push(page); 
      indexLink = historyLinks.length - 1; 
  } 
  
  function canGoPrevious() { 
      return indexLink >=1; 
  } 
  
  function previous() { 
      if(!canGoPrevious()) { 
       alert('you can not load previous page'); 
       return; 
      } 
      indexLink = indexLink - 1; 
      loadPage(historyLinks[indexLink]); 
  } 
  
  
  function canGoNext() { 
      return indexLink + 1 < historyLinks.length; 
  } 
  
  function next() { 
      if(!canGoNext()) { 
       alert('you can not load next page'); 
       return; 
      } 
      indexLink = indexLink + 1; 
      loadPage(historyLinks[indexLink]); 
  }