为我的项目创建响应式下一个/上一个按钮答案

【问题标题】：Create the responsive next / previous button for my project为我的项目创建响应式下一个/上一个按钮
【发布时间】：2022-01-21 07:08:56
【问题描述】：

你们能帮我创建一个下一个和上一个按钮吗？由于我糟糕的 javascript ，我一直在苦苦挣扎。我看到有些人使用 Jquery 和几乎所有的 Javascript。我正在练习 Javascript，所以有很多我不知道的事情。非常感谢。

想要：如果用户想再次阅读该页面，则 Next / Previous 按钮可以转到下一页并返回页面。

我的演示链接：https://jsfiddle。净/hioihia123/zgjswtay/3/

body {
  font-size: 18px;
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/groovepaper.png");
  font-family: 'Gelasio', serif;
}


main {
  color: black;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  width:100%;
  margin-left : auto;
  margin-right: auto;
}

main div {
  width: 100%;
  padding: 6rem 5rem;
}

h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 6rem;
}
h1 {
  font-family: 'Ibarra Real Nova', serif;
  text-align: center;
  font-weight: 400;
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 6rem;
  letter-spacing: .1rem;
}

.right-page {
  margin-top: 0;
  padding-top: 0;
}
.right-page p {
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-word;
}

.right-page p:first-letter {
    font-family: 'Ibarra Real Nova', serif;
    font-size: 4.5rem;
    float: left;
    margin-top: .5rem;
    margin-right: 1rem;
    line-height: .7;
}

.left-page {
    text-align: center;
    padding-top: 4rem;
}

.left-page small {
  font-style: italic;
}

.left-page img {
  max-width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


@media screen and (min-width: 900px) {
  main {
    flex-direction: row;
    with: 100%;
    max-width: 1800px;
  }
  main div {
    width: 50%;
  }
  .left-page {
    padding-top: 14rem;
  }
  .right-page {
    padding-top: 6rem;
    max-height: 100vh;
    height: 100vh;
  }
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Old book Stories</title>
  <link href="https://fonts.googleapis.com/css?family=Gelasio:400,400i|Ibarra+Real+Nova&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main>
  <div class="left-page">
    <img src="https://www.oldbookillustrations.com/wp-content/uploads/2017/03/there-lonely.jpg"/>
    <small>But go there, lonely,<br>
At eventide,<br>
And hearken, hearken<br>
To the lisping tide.<br>
</small>
  </div>
  <div class="right-page">
    <h2>[ 1 ]</h2>
    <h1>Depender</h1>
    <p>
      En cuanto a todas las cosas que existen en el mundo, unas dependen de nosotros,
otras no dependen de nosotros. De nosotros dependen; nuestras opiniones, nuestros
movimientos, nuestros deseos, nuestras inclinaciones, nuestras aversiones; en una
palabra, todas nuestras acciones.<br>
Así, ante toda fantasía perturbadora, está presto a decir: <i>“Tu no eres sino una
      imaginación, y en absoluto eres lo que parece”</i>, enseguida examínala con atención y
ponla a prueba, para ello sírvete de las reglas que tienes, principalmente con esta
primera que es, a saber : de si la cosa que te hace penar es del número de aquellas
que dependen de nosotros o de aquellas que no están en nuestro poder. Di sin
      titubear: <i>“Esa en nada me atañe”.</i>
    </p>
  </div>
</main>
<!-- partial -->
  
</body>
</html>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

您可以简单地在页脚或您喜欢的位置添加Previous 和Next 按钮，然后链接到相应的页面吗？对你来说这还不够简单吗？

<button onclick="location.href='https://google.com';">Previous</button>
<button onclick="location.href='https://facebook.com';">Next</button>

更新

由于您在div 中拥有main 中的所有页面，因此很容易遍历页面，获取可见的 div 并将其隐藏，并根据单击的按钮显示下一页或上一页:)

这是一个示例：

function changePage(prevOrNext) {
  var pages = document.getElementsByTagName('main')[0].children;
  for (let pageIndex = 0; pageIndex < pages.length; pageIndex++) {
    if (pages[pageIndex].style.display == "block") {
      if (prevOrNext == 1 && pageIndex < pages.length - 1) {
        pages[pageIndex].style.display = "none"
        pages[pageIndex + 1].style.display = "block"
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      } else if (prevOrNext == 0 && pageIndex > 0) {
        pages[pageIndex].style.display = "none"
        pages[pageIndex - 1].style.display = "block"
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    }
  }
}

body {
  font-size: 18px;
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/groovepaper.png");
  font-family: 'Gelasio', serif;
}

main {
  color: black;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

main div {
  width: 100%;
  padding: 6rem 5rem;
  display: none
}

h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 6rem;
}

h1 {
  font-family: 'Ibarra Real Nova', serif;
  text-align: center;
  font-weight: 400;
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 6rem;
  letter-spacing: .1rem;
}

.right-page {
  margin-top: 0;
  padding-top: 0;
}

.right-page p {
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-word;
}

.right-page p:first-letter {
  font-family: 'Ibarra Real Nova', serif;
  font-size: 4.5rem;
  float: left;
  margin-top: .5rem;
  margin-right: 1rem;
  line-height: .7;
}

.left-page {
  text-align: center;
  padding-top: 4rem;
}

.left-page small {
  font-style: italic;
}

.left-page img {
  max-width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 900px) {
  main {
    flex-direction: row;
    with: 100%;
    max-width: 1800px;
  }
  main div {
    width: 50%;
  }
  .left-page {
    padding-top: 14rem;
  }
  .right-page {
    padding-top: 6rem;
    max-height: 100vh;
    height: 100vh;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> Old book Stories</title>
  <link href="https://fonts.googleapis.com/css?family=Gelasio:400,400i|Ibarra+Real+Nova&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <main>
    <div class="left-page" style="display: block">
      <img src="https://www.oldbookillustrations.com/wp-content/uploads/2017/03/there-lonely.jpg" />
      <small>But go there, lonely,<br>
At eventide,<br>
And hearken, hearken<br>
To the lisping tide.<br>
</small>
    </div>
    <div class="right-page">
      <h2>[ 1 ]</h2>
      <h1>Depender</h1>
      <p>
        En cuanto a todas las cosas que existen en el mundo, unas dependen de nosotros, otras no dependen de nosotros. De nosotros dependen; nuestras opiniones, nuestros movimientos, nuestros deseos, nuestras inclinaciones, nuestras aversiones; en una palabra,
        todas nuestras acciones.<br> Así, ante toda fantasía perturbadora, está presto a decir: <i>“Tu no eres sino una
      imaginación, y en absoluto eres lo que parece”</i>, enseguida examínala con atención y ponla a prueba, para ello sírvete de las reglas que tienes, principalmente con esta primera que es, a saber : de si la cosa que te hace penar es del número de
        aquellas que dependen de nosotros o de aquellas que no están en nuestro poder. Di sin titubear: <i>“Esa en nada me atañe”.</i>
      </p>
    </div>
  </main>
  <!-- partial -->

</body>

<footer style="text-align: center">
  <button id="prev" onclick="changePage(0)">Previous</button>
  <button id="next" onclick="changePage(1)">Next</button>
</footer>

</html>

【讨论】：

哦，我想像图像滑块一样添加下一个/上一个按钮，但在我的情况下是一个书页。只是想让它更漂亮，但我的技能很烂:((
感谢您解释您的用例，我已经更新了答案。
非常感谢，你刚刚救了我。我不能说足够的感谢。请问你刚才用的javascript叫什么？我正在学习 Javascript，想知道一切：D
我使用的 JavaScript 不包含任何库。它被称为Vanilla/Pure JavaScript