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

ix0qys7i  于 2023-06-20  发布在  Java
关注(0)|答案(5)|浏览(126)

在同一个页面中，我有多个部分。
将显示一个section，这将使用activeclass发生。
在同一个页面中，我有li按钮1，2和3，当我点击其中一个时，与之相关的section出现，旧的消失。为此，我使用JavaScript。
在同一页中，我还有一个下一页和上一页按钮。当我点击下一步按钮时，下一个section应该出现，旧的应该消失。
与此节相关的li也应该有activeclass，与前一节相同：当我点击它时，它应该转到旧的section，当前应该消失，liclass应该是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>
JavaScript

5条答案

按热度按时间
uurv41yg

uurv41yg1#

建议有一个按钮集合和另一个部分，通过索引连接两者，这也需要跟踪。如果我们拥有所有这些，那么下一步就是增加索引，而上一步是减少索引。我不会让previous和next消失，即使问题要求我这样做。我使用disable类。如果我们想让它们出现/消失，那么我们可以使用invisibleclass。

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>
赞(0）分享  回复(0）举报  2023-06-20
xiozqbni

xiozqbni2#

我希望我能很好地理解你的问题，下面的解决方案会有所帮助。
它被分解为小函数，目标是一个函数做一件事。

let tabs = document.querySelectorAll(".nav li");
let sections = document.querySelectorAll(".section");
let nextButton = document.querySelector("#nextBtn");
let prevButton = document.querySelector("#prevBtn");
let current = 0;

const toggleTabs = () => {
  tabs.forEach(function(tab) {
    tab.classList.remove('active');
  });
  tabs[current].classList.add("active");
  //console.log(current);
}

const toggleSections = () => {
  sections.forEach(function(section) {
    section.classList.remove('active');
  });
  sections[current].classList.add("active");
}

const togglePrev = () => {
  const method = current == 0 ? 'add' : 'remove';
  prevButton.classList[method]("disable");
}

const toggleNext = () => {
  const method = current == tabs.length - 1 ? 'add' : 'remove';
  nextButton.classList[method]("disable");
}

const goNext = () => {
  if (current < tabs.length - 1) {
    current++
  }
  toggleTabs();
  toggleSections();
  toggleNext();
  togglePrev();
}

const goPrev = () => {
  if (current > 0) {
    current--
  }
  toggleTabs();
  toggleSections();
  toggleNext();
  togglePrev();
}
.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">1</li>
  <li>2</li>
  <li>3</li>
</ul>

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

<button class="previous disable" id="prevBtn" onclick="goPrev()">Previous</button>
<button class="next" id="nextBtn" onclick="goNext()">Next</button>

下面是一个基于类的解决方案，通过一些CSS更改将内容居中：

class TabbedContent {
  constructor() {
    this.tabs = document.querySelectorAll(".nav li");
    this.sections = document.querySelectorAll(".section");
    this.nextButton = document.querySelector("#nextBtn");
    this.prevButton = document.querySelector("#prevBtn");
    this.current = 0;
  }

  toggleTabs() {
    this.tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });
    this.tabs[this.current].classList.add("active");
  }

  toggleSections() {
    this.sections.forEach(function(section) {
      section.classList.remove('active');
    });
    this.sections[this.current].classList.add("active");
  }

  togglePrev() {
    const method = this.current == 0 ? 'add' : 'remove';
    this.prevButton.classList[method]("disable");
  }

  toggleNext() {
    const method = this.current == this.tabs.length - 1 ? 'add' : 'remove';
    this.nextButton.classList[method]("disable");
  }

  goNext() {
    if (this.current < this.tabs.length - 1) {
      this.current++
    }
    this.toggleTabs();
    this.toggleSections();
    this.toggleNext();
    this.togglePrev();
  }

  goPrev() {
    if (this.current > 0) {
      this.current--
    }
    this.toggleTabs();
    this.toggleSections();
    this.toggleNext();
    this.togglePrev();
  }

}

const tabbedContent = new TabbedContent();
.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: 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;
}
<div class="container">
  <ul class="nav">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
  </ul>

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

  <button class="previous disable" id="prevBtn" onclick="tabbedContent.goPrev()">Previous</button>
  <button class="next" id="nextBtn" onclick="tabbedContent.goNext()">Next</button>
</div>
赞(0）分享  回复(0）举报  2023-06-20
vbopmzt1

vbopmzt13#

如果你想让“上一页”/“下一页”按钮在不改变布局的情况下消失，那么你可以将那些按钮设置为“可见性：隐藏;默认情况下，将其更改为“visibility：visible;”的情况下，将触发该事件。
你也可以使用“button”标签代替“li”标签作为顶部导航栏。
下面是我的代码：

const sectionContent = ["r1", "r2", "r3"];
let currentSection = sectionContent[0];

const displayContent = (q, area) => {
    document.getElementById(q).classList.add("active");
    document.getElementById(q + "-button").classList.add("button-active");
    currentSection = sectionContent[area.indexOf(q)];
    const toNone = area.filter(e => e !== q);
    for (i in toNone) {
        document.getElementById(toNone[i]).classList.remove("active");
        document.getElementById(toNone[i] + "-button").classList.remove("button-active");
    }
    if (sectionContent.indexOf(q) == 0) {
        document.getElementById("previous").classList.remove("button-active");
        document.getElementById("next").classList.add("button-active");
    }
    else if (sectionContent.indexOf(q) == sectionContent.length - 1) {
        document.getElementById("previous").classList.add("button-active");
        document.getElementById("next").classList.remove("button-active");
    } else {
        document.getElementById("previous").classList.add("button-active");
        document.getElementById("next").classList.add("button-active");
    }
}

const displayR1 = () => displayContent("r1", sectionContent);
const displayR2 = () => displayContent("r2", sectionContent);
const displayR3 = () => displayContent("r3", sectionContent);

const displayNext = () => displayContent(sectionContent[sectionContent.indexOf(currentSection) + 1], sectionContent);
const displayPrevious = () => displayContent(sectionContent[sectionContent.indexOf(currentSection) - 1], sectionContent);
.container {
    display: grid;
    place-items: center;
}

.section {
display: none;
}

.section.active {
display: block;
}

.nav {
list-style: none;
margin:0;
padding: 0;
display: flex;
align-items: center;
}
.nav button {
background: #ccc;
padding: 10px 15px;
margin-left: 6px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
border: none;
}

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

.button-active {
opacity: 1 !important;
visibility: visible;
}
<div class="container">
        <nav class="nav">
            <button class="button-active" id="r1-button" onclick="displayR1()">1</button>
            <button id="r2-button" onclick="displayR2()">2</button>
            <button id="r3-button" onclick="displayR3()">3</button>
        </nav>

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

        <nav>
            <button class="previous" id="previous" onclick="displayPrevious()">Previous</button>
            <button class="next button-active" id="next" onclick="displayNext()">Next</button>
        </nav>
    </div>
赞(0）分享  回复(0）举报  2023-06-20
vd2z7a6w

vd2z7a6w4#

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");
        });
    // get the current click section
    // if the current section is 3
    // Then next button should be disabled
    // else if the current section is 1
    // Then prev button should be disabled

        document.querySelector('#' + e.currentTarget.dataset.cont).classList.add("active");
    });
});

对不起，不擅长纯Javascript，但为了便于可视化，这应该是一个过程
您可以通过获取data-cont属性来标识当前部分，使用jQuery，代码将是$(ele).attr('data-cont')，它将返回任何r1、r2或r3

// Get the current data-cont value in li attribute
var currSection = $(ele).attr('data-cont')
// Disable previous button when currSection is r1
$('button.previous').prop('disabled', currSection == 'r1')
// Disable next button when currSection is r3
$('button.next').prop('disabled', currSection == 'r3')
赞(0）分享  回复(0）举报  2023-06-20
fxnxkyjh

fxnxkyjh5#

const sectionContent = ["r1", "r2", "r3"];
let currentSection = sectionContent[0];

const displayContent = (q, area) => {
    document.getElementById(q).classList.add("active");
    document.getElementById(q + "-button").classList.add("button-active");
    currentSection = sectionContent[area.indexOf(q)];
    const toNone = area.filter(e => e !== q);
    for (i in toNone) {
        document.getElementById(toNone[i]).classList.remove("active");
        document.getElementById(toNone[i] + "-button").classList.remove("button-active");
    }
    if (sectionContent.indexOf(q) == 0) {
        document.getElementById("previous").classList.remove("button-active");
        document.getElementById("next").classList.add("button-active");
    }
    else if (sectionContent.indexOf(q) == sectionContent.length - 1) {
        document.getElementById("previous").classList.add("button-active");
        document.getElementById("next").classList.remove("button-active");
    } else {
        document.getElementById("previous").classList.add("button-active");
        document.getElementById("next").classList.add("button-active");
    }
}

const displayR1 = () => displayContent("r1", sectionContent);
const displayR2 = () => displayContent("r2", sectionContent);
const displayR3 = () => displayContent("r3", sectionContent);

const displayNext = () => displayContent(sectionContent[sectionContent.indexOf(currentSection) + 1], sectionContent);
const displayPrevious = () => displayContent(sectionContent[sectionContent.indexOf(currentSection) - 1], sectionContent);
.container {
    display: grid;
    place-items: center;
}

.section {
display: none;
}

.section.active {
display: block;
}

.nav {
list-style: none;
margin:0;
padding: 0;
display: flex;
align-items: center;
}
.nav button {
background: #ccc;
padding: 10px 15px;
margin-left: 6px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
border: none;
}

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

.button-active {
opacity: 1 !important;
visibility: visible;
}
<div class="container">
        <nav class="nav">
            <button class="button-active" id="r1-button" onclick="displayR1()">1</button>
            <button id="r2-button" onclick="displayR2()">2</button>
            <button id="r3-button" onclick="displayR3()">3</button>
        </nav>

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

        <nav>
            <button class="previous" id="previous" onclick="displayPrevious()">Previous</button>
            <button class="next button-active" id="next" onclick="displayNext()">Next</button>
        </nav>
    </div>
赞(0）分享  回复(0）举报  2023-06-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com