页面中的Javascript页面

Question

我试图在一个页面中创建一个“下一个/前一个”系统--在这个系统中，它一次显示一个特定的项或“页面”。我似乎在网上找不到一个实用的解决方案。它目前正在工作，但代码是不专业和不必要的长/复杂，特别是当我希望它有多达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>

CSS -

.hidden {
display:none;
}

JS -

        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');
        }

如果有人能够帮助我用一个更干净更好的脚本来简化这段代码，那将是非常值得赞赏的。谢谢

Answer 1

最基本的实现可能是存储一个全局变量，该变量跟踪当前可见的页面号。

使用这个数字，您可以动态地获取in，例如，`page${currentPageNumber}`将产生类似于page2的内容。

同样，您可以通过执行`page${currentPageNumber+1}`获得下一页。

​

let currentPageNumber = 1;
function nextPage() {
  document.getElementById(`page${currentPageNumber}`).classList.add("hidden");        //Hide the current page
  document.getElementById(`page${currentPageNumber+1}`).classList.remove("hidden");   //Show the next page
  currentPageNumber++;                                                                //Increase currentPage accordingly
}

.hidden {
  display: none;
}

<div id="page1">Page 1 <button onclick="nextPage()">Next</button></div>
<div id="page2" class="hidden">Page 2 <button onclick="nextPage()">Next</button></div>
<div id="page3" class="hidden">Page 3 <button onclick="nextPage()">Next</button></div>
<div id="page4" class="hidden">Page 4</div>

​