使用 JavaScript 中的下一个和上一个按钮在部分页面之间移动

Question

在同一页面中我有多个部分。

将显示一个section，这将使用active class.

在同一页面中，我有li按钮 1、2 和 3，当我单击其中一个按钮时，会section出现与其相关的按钮，而旧按钮会消失。为此，我使用 Javascript。

另外，在同一页面中，我有一个下一个和上一个按钮。当我单击下一个按钮时，下一个按钮section应该出现，旧的按钮应该消失。

而且与li该部分相关的应该有active class，与上一个部分相同：当我单击它时，它应该转到旧的section，当前的应该消失，并且li class应该是active。

当我在第一个section部分时，上一个按钮应该消失，当我在最后一部分时，下一个按钮应该消失。

如何使用 Javascript 以这种方式实现下一个和上一个按钮的这种行为？

请帮忙！？

let tab = document.querySelector(".nav li");
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
let section = document.querySelectorAll(".section");
let sectionArray = Array.from(section);
let nextButton = document.querySelector(".next");
let prevButton = document.querySelector(".previous");
let current = 0;

tabsArray.forEach((ele) => {
    ele.addEventListener("click", function (e) {
        tabsArray.forEach((ele) => {
            ele.classList.remove("active");
        });
        e.currentTarget.classList.add("active");
        
        sectionArray.forEach((sec) => {
            sec.classList.remove("active");
        });
        if(e.currentTarget.dataset.cont =='r1'){
           prevButton.classList.add("disable");
        }else{
          prevButton.classList.remove("disable");
  }
if (
  document.querySelector("#" + e.currentTarget.dataset.cont) ==
  sectionArray[sectionArray.length - 1]
) {
  nextButton.classList.add("disable");
} else {
  nextButton.classList.remove("disable");
}
        document.querySelector('#' + e.currentTarget.dataset.cont).classList.add("active");
    });
});

.section {
display: none;
}

.section.active{
display: block;
}

ul {
list-style: none;
margin:0;
padding: 0;
display: flex;
align-items: center;
}

ul li {
background: #ccc;
padding: 10px 15px;
margin-left: 6px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
}

ul li.active{
opacity: 1 !important;
}

.next,
.previous {
padding: 15px 10px;
border-radius: 6px;
background: deepskyblue;
color: white;
border:0;
outline: none;
cursor: pointer;
width: 100px;
}

.next.disable,
.previous.disable{
  cursor: none;
  opacity: .5;
}

<ul class="nav">
<li class="active" data-cont="r1">1</li>
<li data-cont="r2">2</li>
<li data-cont="r3">3</li>
</ul>


<section id="r1" class="section section-one active">
<h2>section 1</h2>
</section>
<section id="r2" class="section section-two">
<h2>section 2</h2>
</section>
<section id="r3" class="section section-three">
<h2>section 3</h2>
</section>


<button class="previous disable" id="previous">Previous</button>
<button class="next" id="next">Next</button>
   

Answer 1

建议有一组按钮和另一个部分，通过索引连接这两个按钮，索引也需要跟踪。如果我们拥有所有这些，那么下一步就是增加索引，而上一步就是减少索引。我不会让前一个和下一个消失，即使问题要求我这样做。相反，我正在使用该类disable。如果我们想让它们出现/消失，那么我们可以使用 theinvisible class来代替。

let currentSection = 0;
let sections = document.querySelectorAll(".section");
let sectionButtons = document.querySelectorAll(".nav > li");
let nextButton = document.querySelector(".next");
let previousButton = document.querySelector(".previous");
for (let i = 0; i < sectionButtons.length; i++) {
    sectionButtons[i].addEventListener("click", function() {
        sections[currentSection].classList.remove("active");
        sectionButtons[currentSection].classList.remove("active");
        sections[currentSection = i].classList.add("active");
        sectionButtons[currentSection].classList.add("active");
        if (i === 0) {
            if (previousButton.className.split(" ").indexOf("disable") < 0) {
                previousButton.classList.add("disable");
            }
        } else {
            if (previousButton.className.split(" ").indexOf("disable") >= 0) {
                previousButton.classList.remove("disable");
            }
        }
        if (i === sectionButtons.length - 1) {
            if (nextButton.className.split(" ").indexOf("disable") < 0) {
                nextButton.classList.add("disable");
            }
        } else {
            if (nextButton.className.split(" ").indexOf("disable") >= 0) {
                nextButton.classList.remove("disable");
            }
        }
    });
}

nextButton.addEventListener("click", function() {
    if (currentSection < sectionButtons.length - 1) {
        sectionButtons[currentSection + 1].click();
    }
});

previousButton.addEventListener("click", function() {
    if (currentSection > 0) {
        sectionButtons[currentSection - 1].click();
    }
});

.section {
display: none;
}

.section.active{
display: block;
}

.invisible {
    display: none;
}

ul {
list-style: none;
margin:0;
padding: 0;
display: flex;
align-items: center;
}

ul li {
background: #ccc;
padding: 10px 15px;
margin-left: 6px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
}

ul li.active{
opacity: 1 !important;
}

.next,
.previous {
padding: 15px 10px;
border-radius: 6px;
background: deepskyblue;
color: white;
border:0;
outline: none;
cursor: pointer;
width: 100px;
}

.next.disable,
.previous.disable{
  cursor: none;
  opacity: .5;
}

<ul class="nav">
<li class="active" data-cont="r1">1</li>
<li data-cont="r2">2</li>
<li data-cont="r3">3</li>
</ul>


<section id="r1" class="section section-one active">
<h2>section 1</h2>
</section>
<section id="r2" class="section section-two">
<h2>section 2</h2>
</section>
<section id="r3" class="section section-three">
<h2>section 3</h2>
</section>


<button class="previous disable" id="previous">Previous</button>
<button class="next" id="next">Next</button>