时间戳

首页 > 解决方案 > 需要一个连续加载网页的“下一步”按钮/链接

javascript - 需要一个连续加载网页的“下一步”按钮/链接

问题描述

我有将近一千个 HTML 页面构成一本书。我需要这些页面上的“下一页”按钮/链接，它将连续加载下一页 - 以便读者可以连续从一个页面导航到下一个页面。我知道这样做的唯一方法是手动将每个页面的链接插入到带有“下一页”标签的上一页。几页没关系-但是几千页？？？我什至想到它就心脏病发作！

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

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

提前感谢您抽出宝贵时间阅读本文！

标签： javascriptjquerybuttonnavigationnext

解决方案

在这里我们不能使用“Next”按钮方法，因为我们不能打开每本书的 html 并添加“Next”按钮（很多工作）。避免打开内容html。我们需要在这里使用 .load() 函数，将书籍 html 内容加载到新的 HTML 页面中。

下面的代码可能会对您有所帮助：首先在同一目录中创建一个 html 页面并添加一个和一个“下一步”。假设图书内容在 ID = "bookContent" 的 DIV 中

如果起始页为 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);
});

推荐阅读