页面中的Javascript页面

我试图在一个页面中创建一个“下一个/上一个”系统，它一次显示一个特定的项目或“页面”。我似乎在网上找不到一个切实可行的解决办法。它目前正在运行，但代码不专业，而且不必要的长/复杂，尤其是当我希望它最多有5页时

我不是一个有经验的JS程序员，所以请对我放松点

HTML-

<div id="page1">Page 1 <button onclick="secondPage()">Next</button></div>
<div id="page2">Page 2 <button onclick="thirdPage()">Next</button></div>
<div id="page3">Page 3 <button onclick="fourthPage()">Next</button></div>
<div id="page4">Page 4</div>

JS-

---

如果有人能帮我用更干净更好的脚本简化这段代码，我将不胜感激。多亏了最基本的实现可能是存储一个全局变量，用于跟踪当前可见的页码

使用该数字可以动态地获取ID，例如，

`page${currentPageNumber}

将产生类似于

page2

的结果

类似地，您可以通过执行

`page${currentPageNumber+1}`

来获得下一页

让currentPageNumber=1；
函数下一页（）{
document.getElementById（`page${currentPageNumber}`）.classList.add（“hidden”）；//隐藏当前页面
document.getElementById（`page${currentPageNumber+1}`）.classList.remove（“hidden”）；//显示下一页
currentPageNumber++；//相应地增加currentPage
}

。隐藏{
显示：无；
}

第1页下一页
第2页下一页
第3页下一页
第4页

有什么原因不能使用传统链接和javascript导航？

.hidden {
display:none;
}

        function secondPage() {
            document.getElementById("page1").classList.add('hidden');
            document.getElementById("page2").classList.remove('hidden');
            document.getElementById("page3").classList.add('hidden');
            document.getElementById("page4").classList.add('hidden');
        }
        function thirdPage() {
            document.getElementById("page1").classList.add('hidden');
            document.getElementById("page2").classList.add('hidden');
            document.getElementById("page3").classList.remove('hidden');
            document.getElementById("page4").classList.add('hidden');
        }
        function fourthPage() {
            document.getElementById("page1").classList.add('hidden');
            document.getElementById("page2").classList.add('hidden');
            document.getElementById("page3").classList.add('hidden');
            document.getElementById("page4").classList.remove('hidden');
        }