下一个上一个加载功能按钮

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

你必须这样做：

• 验证代码是否正常工作

代码：

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]);
}