我有一些代码，我想制作多个页面。当我单击按钮时，没有任何变化。上一个按钮 should 后退一页，将页码更改为 -1，如果页数为 1，则禁用。 下一个按钮 should 前进一页，将页码更改为 1，如果页码为 1，则禁用page 是页数。 这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>7ktTube Modified (more logos) | MoleTech</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div class="content-container">
<section id="1" class="page">
<div class="container">
<p>Page 1</p>
</div>
</section>
<section id="2" class="page" hidden>
<div class="container">
<p>Page 2</p>
</div>
</section>
<div class="bottomBar">
<div class="pageControls">
<button id="prev-btn" onclick="prevPg()">Previous</button>
<p id="dispPgNum" class="pNoBr">1/2</p>
<button id="next-btn" onclick="nextPg()">Next</button>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
const nextBtn = document.querySelector("#next-btn");
const prevBtn = document.querySelector("#prev-btn");
const page = $(".page").attr("id");
const page1 = document.getElementById("1");
const page2 = document.getElementById("2");
const pgNumTxt = document.getElementById("dispPgNum").textContent;
const url = new URL(window.location.href());
const params = new URLSearchParams(url.search);
var pageCt = page.length();
var pageNum = 1;
pgNumTxt = 1;
switch (pageNum) {
case 1:
page1.style.visibility = "visible";
page2.style.visibility = "hidden";
break;
case 2:
page1.style.visibility = "hidden";
page2.style.visibility = "visible";
break;
}
function nextPg() {
if (pageNum == pageCt) {
nextBtn.disabled = true;
} else {
nextBtn.disabled = false;
pageNum + 1;
}
pgNumTxt = pageNum + "/" + pageCt;
}
function prevPg() {
if (pageNum == 1) {
prevBtn.disabled = true;
} else {
prevBtn.disabled = false;
pageNum - 1;
}
pgNumTxt = pageNum + "/" + pageCt;
}
params.set("page", pageNum);
url.search = params.toString();
});
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");
}
});
}
nextBtn.addEventListener("click", function() {
if (currentSection < sectionButtons.length - 1) {
sectionButtons[currentSection + 1].click();
}
});
prevBtn.addEventListener("click", function() {
if (currentSection > 0) {
sectionButtons[currentSection - 1].click();
}
});
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Balsamiq sans', cursive;
background-color: black;
color: #00aa00;
}
html {
/* Variables */
--width-contcon: 50%;
--width-bottomBar: 80%;
--height-bottomBar: 26px;
--bbcc-spacing: 5%;
}
.content-container {
overflow: hidden;
position: relative;
border-left-width: 4px;
border-left-style: solid;
border-right-width: 4px;
border-right-style: solid;
border-image: radial-gradient(#dddddd, #00000000) 40;
width: var(--width-contcon);
height: 98vh;
left: calc((100% - var(--width-contcon)) / 2);
}
.container {
position: inherit;
margin: 0 auto;
border: 1px white solid;
}
.pNoBr {
display: inline;
}
.bottomBar {
padding: 6px;
position: relative;
border: 1px #ffffff solid;
width: var(--width-bottomBar);
top: calc((100% - var(--height-bottomBar)) / 1.16);
left: calc((100% - var(--width-bottomBar)) / 2);
}
.pageControls {
position: relative;
left: calc(var(--width-bottomBar) / 2);
}
当我点击按钮时，什么也没发生。
由于缺少
jquery我首先建议的是开发者工具和控制台。它是一个显示与页面相关的所有错误和警告的工具，并且可在所有主要浏览器上使用。使用它，您可以逐步查找并解决您遇到的问题。
由于存在很多错误并且没有简单的修复方法，因此从头开始实施简单的解决方案要容易得多。所以这里是带有 HTML 和 CSS 的示例，但我的是 JS：https://jsfiddle.net/hxza8p6r/26/
我对 HTML 页面做了一些更改：
data-pagesection