jQuery load方法异步加载下一页和上一页

我正在创建一个分页，使用jQuery加载方法将页面加载到div中。我想添加一个“下一页”和“上一页”按钮，允许用户在单击div“#content”时加载下一页或上一页。我已经研究了jQuery.prev（）和.next（）方法，但我不知道如何在这里合并这些方法来实现我的目标。欢迎提供任何建议或演示。先谢谢你

//References
var sections = $("a"),
   pageBody = $("#content"); //new/prev pages load in this div

//Manage click events
sections.on('click', function () {

   //load selected section
   switch (this.id) {
   case "page-1":
      pageBody.load("page1.html");
      break;
   case "page-2":
      pageBody.load("pagee2.html");
      break;
   case "page-3":
      pageBody.load("page3.html");
      break;
   case "page-4":
      pageBody.load("page4.html");
      break;
   case "page-5":
      pageBody.load("page5.html");
      break;
   default:
      break;
   }
});

这是我的HTML：

<div id="content">

   <h2>Page TITLE</h2>
   <p>Page Text Goes Here</p>


   <div>
      <a class="prev" href="#"></a>
      <ul class="nav">
         <li>
            <a id="page-1" href="#"></a>
         </li>
         <li>
            <a id="page-2" href="#"></a>
         </li>
         <li>
            <a id="page-3" href="#"></a>
         </li>
         <li>
            <a id="page-4" href="#"></a>
         </li>
         <li>
            <a id="page-5" href="#"></a>
         </li>
      </ul>
      <a class="next" href="#"></a>
   </div>

</div>

页面标题
页面文本在这里

将标记更改为

<div id="content">
    <h2>Page TITLE</h2>
    <p>Page Text Goes Here</p>

    <div> 
        <a class="prev" href="#"></a>

        <ul class="nav">
            <li><a id="page1" href="#"></a></li>
            <li><a id="page2" href="#"></a></li>
            <li><a id="page3" href="#"></a></li>
            <li><a id="page4" href="#"></a></li>
            <li><a id="page5" href="#"></a></li>
        </ul> 

        <a class="next" href="#"></a>

    </div>
</div>

页面标题
页面文本在这里

用这样的东西

var sections = $(".nav a");

sections.on('click', function () {
    $("#content").load(this.id + '.html');
    sections.removeClass('active');
    $(this).addClass('active');
});

$('.next').on('click', function() {
    var idx = sections.index( sections.filter('.active') ) + 1;
    idx = idx > sections.length-1 ? 0 : idx;
    sections.eq(idx).trigger('click');
});

$('.prev').on('click', function() {
    var idx = sections.index( sections.filter('.active') ) - 1;
    idx = idx < 0 ? sections.length-1 : idx;
    sections.eq(idx).trigger('click');
});

//References
var sections = $("a"),
    pageBody = $("#content"),//new/prev pages load in this div
    prev = $(".prev"),
    next = $(".next");

//Manage click events
sections.on('click',changeSection(this.data('nav')));
prev.on('click',function() {
    // get the nav id
    navId = this.data('nav');
    prevId = navId - 1;

   //change the data
   changesection("page-" + prevId);
});


next.on('click',function() {
    // get the nav id
    navId = this.data('nav');
    prevId = navId + 1;

   //change the data
   changesection("page-" + prevId);
});

// You can place this function outside of the $(document).load 
function changeSection(id) {
 function(){
     // set the new nav
    pageBody.data('nav', id);
    //load selected section
    switch(id){
        case "1": 
                pageBody.load("page1.html");
                break;
        case "2": pageBody.load("pagee2.html");
                break;
        case "3": pageBody.load("page3.html");
                break;
        case "4": pageBody.load("page4.html");
                break;
        case "5": pageBody.load("page5.html");
                break;
        default:
                break;
    }
}

var节=$（“.nav a”）；
节。关于（'单击'，函数（）{
$（“#content”）.load（this.id+'.html'）；
章节。removeClass（“活动”）；
$（this.addClass（'active'）；
});
$（'.next'）。在（'click'，function（）上{
var idx=sections.index（sections.filter（'.active'））+1；
idx=idx>sections.length-1？0:idx；
节.eq（idx）.trigger（'click'）；
});
$（'.prev'）。在（'click'，function（）上{
var idx=sections.index（sections.filter（'.active'））-1；
idx=idx<0？截面。长度-1:idx；
节.eq（idx）.trigger（'click'）；
});

它增加索引并获取下一个/上一个元素等。

为您的#content div指定一个数据属性，然后将其用作当前页面，例如

        <div id="content" data-nav="1">
            <h2>Page TITLE</h2>
            <p>Page Text Goes Here</p>
        <div>

            <a class="prev" href="#"></a>
            <ul class="nav">
                <li><a data-nav="1" href="#"></a></li>
                <li><a data-nav="2" href="#"></a></li>
                <li><a data.nav="3" href="#"></a></li>
                <li><a data.nav="4" href="#"></a></li>
                <li><a data.nav="5" href="#"></a></li>
            </ul>
            <a class="next" href="#"></a>
        </div>

---

这是我做的一件很快的事情，通过重构上一次和下一次单击并将它们组合成一个函数（通过传递真/假来添加一个或删除一个），肯定有改进的余地您可能会放弃开关，直接通过nav中的变量加载页面

您可以将当前页面存储在下一个或上一个链接的数据属性中，即$（'.prev'）.data（'curPage'，'page-1'）；这是一种很好的做事方式。@dops-谢谢，这样做似乎更整洁。还没有测试过它（用ajax的东西测试有点困难），所以不确定它是否有效，但原则至少应该有效。谢谢。.active正在删除并添加到节中，但页面不再加载到我的#content div中。@user1584751这是因为您的id与文件名不同，请从您的id中删除破折号（使第1页变为第1页等），不幸的是，这对我仍然不起作用。在firebug中，我可以在相应的页面ID旁边看到所选的类，但这是当我单击ID=“page”锚按钮时，不是下一个或上一个锚按钮。我还注意到，当我单击任何id=“page”锚时，下一个和上一个锚都会显示活动。