需要一个串行加载网页的"Next"按钮/链接

Question

我有将近一千个HTML页面组成了一本书。我需要一个"下一步"这些页面上的按钮/链接将连续加载下一页-以便读者可以从一个页面连续导航到下一个页面。我知道这样做的唯一方法是手动插入每一页的链接到前一页的标签"下一页"。写几页还可以，但是写几千页呢?我想想就会心脏病发作!

所以我想也许这可以通过一点Javascript/Jquery编码来完成，这可能会简化和自动化这个过程，而不需要打开和关闭一千个页面，复制和粘贴一千个链接。之后，我可以简单地使用Dreamweaver或任何类似的HTML编辑器将相同的代码一次性插入所有页面。问题是，我不是程序员或编码员，对Java、Borneo或任何其他脚本几乎一无所知!有人能帮我吗?

我所有的HTML页面(文件名)都是按顺序命名的——page1.html, page2.html, page3.html…等等......它们都在同一个文件夹中。我在想，如果有可能以编程方式读取当前页面的名称，只有它的数字部分通过添加1来替换下一个数字-而不干扰文件名的其余部分-然后打开该名称的HTML文件onClick?这可能吗?有人能帮我写点代码吗?

提前感谢您花时间阅读这篇文章!

Answer 1

这里我们不能使用"Next"按钮方法，因为我们不能打开每本书html并添加"下一个"专心工作(很多工作)。避免打开内容html。我们需要在这里使用。load()函数，将book html内容加载到一个新的html页面中。

下面的代码可以帮助你:首先在同一目录下创建一个html页面，并添加"Next"假设图书内容在DIV中，ID = "bookContent">

如果起始页是1，那么代码将是

var currentPage;
$(window).on('load', function () {
currentPage = 1;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load html book content from page1.html
$('#content').load(contentHtml);
});
//set next button
$('#next').onclick(function(){
currentPage++;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load next page
$('#content').load(contentHtml);
});