如何在多个 html 页面上为上一个和下一个按钮添加相同的代码

How to add same code on multiple html pages for prev and next buttons?

本文关键字：按钮 下一个 添加 代码 上一个 html      更新时间：2023-09-26

我有超过 300 个 html 页面，每个页面的名称相同，末尾有 3 个数字 示例第一页命名为GS001.html，第二页命名为GS002.html，第三页命名为GS003.html等等...直到GS330.html

我需要上一个和下一个按钮的代码（最好是粘贴到所有页面上的代码相同）例如，如果我在 gs150.html 页上，则需要上一个按钮转到 gs149.html下一个按钮转到 gs151.html

这可能吗？

以下是仅使用 HTML 和 JavaScript 的方法：

<html>
<body>
    <script>
        function getNewUrl(addNum) {
            var url = window.location.pathname;
            var lastIndex = url.lastIndexOf('/');
            var filename = url.substring(lastIndex + 1);
            var newFileName = filename.substring(0, 2) +
                pad(parseInt(filename.substring(2, 5), 10) + addNum, 3) +
                filename.substring(5);
            return url.substring(0, lastIndex) + newFileName;
        }
        function pad(number, length) {
            var str = '' + number;
            while (str.length < length) {
                str = '0' + str;
            }
            return str;
        }
    </script>
    <button id="previous" onclick="window.location = getNewUrl(-1)">Previous</button>
    <button id="next" onclick="window.location = getNewUrl(1)">Next</button>

</body>
</html>

您可以将代码正文放在文件中并尝试一下。

请注意，我已经以快速而肮脏的方式编写了上面的代码。如果你要去生产，你可能想使用无障碍的JavaScript，并把一些错误处理到位......这完全取决于您的应用。

如果您的服务器上可用，请使用 PHP。在每个页面的顶部放置一行 PHP 来指定页码，或者让顶部的 PHP 从文件名中计算出页码。

然后在每页的底部包含一个标准化的PHP文件，该文件根据当前页码计算出上一页和下一页。

相关文章：