以下是几种实现 ./tbkl3.html 点击下一页后自动根据规律打开 ./tbkl4.html 的方法:
方法一:使用 HTML 和 JavaScript
在 ./tbkl3.html 中添加以下代码:
html
Page tbkl3
代码解释:
window.location.pathname.split('/').pop();:通过 window.location.pathname 获取当前页面的路径,然后使用 split('/') 将其拆分成数组,最后使用 pop() 方法获取数组的最后一个元素,即当前页面的文件名。
parseInt(currentPage.replace(/\D/g, ''));:将文件名中的非数字字符移除,然后将结果转换为整数。
var nextPageNumber = pageNumber + 1;:计算下一页的数字部分。
var nextPage = './tbkl' + nextPageNumber + '.html';:根据下一页的数字部分构造下一页的文件名。
window.location.href = nextPage;:将浏览器的位置重定向到下一页。
方法二:使用 jQuery
如果你使用 jQuery 库,可以使用以下代码:
html
Page tbkl3
代码解释:
$(document).ready(function() {... });:确保页面加载完成后执行代码。
$('#nextPageButton').click(function() {... });:当 id 为 nextPageButton 的按钮被点击时,执行相应的函数。
后续的逻辑与方法一中的 JavaScript 部分相同,只是使用了 jQuery 的元素选择器和事件绑定机制。
方法三:使用纯 HTML 超链接和相对路径
如果页面命名规律是 tbkl1.html, tbkl2.html, tbkl3.html 等,可以使用以下简单的 HTML 代码:
html
Page tbkl3
下一页
代码解释:
下一页:使用 HTML 的超链接标签 a,href 属性指定了点击时要跳转的页面,使用相对路径 ./tbkl4.html。
如果你想要让这个链接自动更新到下一页,可以考虑结合 HTML 和 JavaScript。例如,在页面加载时,使用 JavaScript 修改 a 标签的 href 属性:
html
Page tbkl3
下一页
代码解释:
window.onload = function() {... };:页面加载完成后执行的函数。
var nextPageLink = document.querySelector('a[href="./tbkl4.html"]');:使用 document.querySelector 查找 href 属性为 ./tbkl4.html 的链接元素。
nextPageLink.href = nextPage;:将找到的链接元素的 href 属性更新为计算得到的下一页的地址。
根据你的具体情况,你可以选择适合的方法。如果你需要更复杂的分页逻辑,例如循环翻页(从最后一页回到第一页)或者处理页面命名的其他规律,可以对上述代码进行修改和扩展。