HTML分页切换按钮无响应，如何实现页面切换、页码更新及按钮禁用功能？

兄弟，我仔细看了你的代码，发现好几个导致按钮点击没反应的核心问题，咱们一步步拆解修复：

先说说为啥之前按钮完全没反应 #

1. 函数作用域问题：你把nextPg和prevPg写在$(document).ready()的回调里，而HTML按钮用onclick调用的是全局作用域的函数，这时候全局找不到这两个函数，点击自然没效果！
2. 未定义变量报错：你后面的代码用到了sectionButtons，但根本没定义过这个变量，浏览器控制台肯定会报错，直接导致整个JS脚本挂掉，前面的逻辑也跑不起来。
3. 变量赋值错误：比如pageNum + 1;只是做了计算，没有把结果赋值回pageNum，等于白算，页码根本不会变。
4. CSS定位问题：.pageControls的left: calc(var(--width-bottomBar)/2)会让它直接跑到.bottomBar的外面，按钮可能被隐藏或者点不到。

修复后的完整代码（直接用就能实现需求） #

1. HTML（优化事件绑定方式）

<!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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <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">Previous</button>
          <p id="dispPgNum" class="pNoBr">1/2</p>
          <button id="next-btn">Next</button>
        </div>
      </div>
    </div>
  </body>
</html>

注意：我加了jQuery的CDN引用，如果你本地有jQuery文件可以替换，确保JS加载顺序正确即可。

2. CSS（修复定位，确保按钮可点击）

@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;
  margin: 0; /* 去掉浏览器默认边距 */
}

html {
  --width-contcon: 50%;
  --width-bottomBar: 80%;
  --height-bottomBar: 26px;
  --bbcc-spacing: 5%;
}

.content-container {
  overflow: hidden;
  position: relative;
  border-left: 4px solid;
  border-right: 4px 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;
  margin: 0 12px; /* 给页码加左右间距，看着更舒服 */
}
.bottomBar {
  padding: 6px;
  position: absolute; /* 改成绝对定位，固定在容器底部 */
  border: 1px #ffffff solid;
  width: var(--width-bottomBar);
  bottom: 15px;
  left: calc((100% - var(--width-bottomBar)) / 2);
  display: flex;
  justify-content: center; /* 让内部控件居中 */
}
.pageControls {
  display: flex;
  align-items: center;
  gap: 8px; /* 按钮和页码之间的间距 */
}

3. 修复后的JS（逻辑清晰，功能完整）

$(document).ready(function(){
  const nextBtn = document.querySelector("#next-btn");
  const prevBtn = document.querySelector("#prev-btn");
  const pages = document.querySelectorAll(".page"); // 获取所有页面元素
  const pgNumElement = document.getElementById("dispPgNum");
  const totalPages = pages.length; // 自动获取总页数，新增页面不用改JS
  let currentPage = 1; // 当前页码，用let可以修改

  // 初始化页面状态
  updateAllStates();

  // 绑定下一页点击事件
  nextBtn.addEventListener("click", () => {
    if (currentPage < totalPages) {
      currentPage += 1;
      updateAllStates();
    }
  });

  // 绑定上一页点击事件
  prevBtn.addEventListener("click", () => {
    if (currentPage > 1) {
      currentPage -= 1;
      updateAllStates();
    }
  });

  // 统一更新所有状态的快捷函数
  function updateAllStates() {
    updatePageDisplay();
    updatePageNumberText();
    updateButtonStates();
    updateURLParams();
  }

  // 切换页面显示：隐藏所有，只显示当前页
  function updatePageDisplay() {
    pages.forEach(page => {
      const pageId = parseInt(page.id);
      page.hidden = pageId !== currentPage;
    });
  }

  // 更新页码文本
  function updatePageNumberText() {
    pgNumElement.textContent = `${currentPage}/${totalPages}`;
  }

  // 更新按钮禁用状态
  function updateButtonStates() {
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage === totalPages;
  }

  // 更新URL参数（可选，不需要可以删掉）
  function updateURLParams() {
    const url = new URL(window.location.href);
    const params = new URLSearchParams(url.search);
    params.set("page", currentPage);
    url.search = params.toString();
    // 替换当前历史记录，不会刷新页面
    window.history.replaceState({}, document.title, url);
  }
});

修复后的效果 #

• 点击「Previous」「Next」按钮可以正常切换页面
• 页码会实时更新为「当前页/总页数」
• 到第一页时，上一页按钮自动禁用；到最后一页时，下一页按钮自动禁用
• 按钮再也不会因为定位问题点不到了

备注：内容来源于stack exchange，提问作者Unseeable871