本文教你用纯 html 和 javascript 实现一个支持“上一页/下一页”切换的动态内容容器，无需跳转页面或创建多个文件，通过数组和状态管理轻松完成多步内容展示。
本文教你用纯 html 和 javascript 实现一个支持“上一页/下一页”切换的动态内容容器，无需跳转页面或创建多个文件，通过数组和状态管理轻松完成多步内容展示。
在网页开发中，常需在固定区域（如 <div>）内按需切换显示内容——例如教程步骤、图片轮播、表单分页等。若每次切换都跳转新页面，不仅体验割裂、加载延迟，还会显著增加维护成本。更优雅的方案是：<strong>在单页内通过 JavaScript 动态更新 DOM 内容</strong>，配合 Next（下一步）和 Back（上一步）按钮实现流畅导航。<p>下面是一个完整、可直接运行的示例，支持双向切换、边界保护，并具备良好的可扩展性：</p><pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Next/Back 内容切换示例</title>
<style>
#changediv {
padding: 16px;
margin: 20px 0;
background-color: #f9f9f9;
border-radius: 4px;
min-height: 60px;
display: flex;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button {
padding: 8px 16px;
margin: 0 4px;
font-size: 14px;
cursor: pointer;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 4px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<div id="changediv">点击「下一步」开始</div>
<button id="backBtn" disabled>← 上一步</button>
<button id="nextBtn">下一步 →</button>
<script>
// 定义所有待展示的内容（支持文字、HTML 片段、甚至对象）
const contentList = [
"欢迎使用导航系统！",
"这是第二步说明。",
"第三步：请检查设置项。",
"最后一步：点击「完成」即可。"
];
let currentIndex = 0;
// 更新显示内容及按钮状态
function updateDisplay() {
document.getElementById("changediv").innerHTML = contentList[currentIndex];
// 启用/禁用按钮，防止越界操作
document.getElementById("backBtn").disabled = (currentIndex === 0);
document.getElementById("nextBtn").disabled = (currentIndex === contentList.length - 1);
}
// 初始化显示
updateDisplay();
// 绑定事件（推荐使用 addEventListener，避免内联脚本）
document.getElementById("nextBtn").addEventListener("click", () => {
if (currentIndex < contentList.length - 1) {
currentIndex++;
updateDisplay();
}
});
document.getElementById("backBtn").addEventListener("click", () => {
if (currentIndex > 0) {
currentIndex--;
updateDisplay();
}
});
</script>
</body>
</html></pre><p>✅ <strong>关键要点说明：</strong> </p>
<ul>
<li>使用 <code>currentIndex 变量追踪当前显示项索引，而非重复赋值覆盖（你原代码中连续两行 .innerHTML = ... 会立即覆盖前一行，导致只显示“two”）；
contentList，便于增删改查，也利于后续对接 JSON 数据或 API； disabled 属性智能控制按钮可用性，提升用户体验与健壮性； addEventListener 替代内联 onclick，符合现代 Web 开发最佳实践，更易维护、调试和测试。? 进阶提示：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 若需支持循环切换（如到末尾后回到开头），将
currentIndex++改为(currentIndex + 1) % contentList.length； - 可扩展为加载 HTML 片段、渲染组件、或结合 CSS 过渡实现淡入淡出动画；
- 对于复杂场景（如多步骤表单），建议封装为类（Class）或使用轻量状态库（如 Zustand 精简版）。
这个方案简洁、可靠、无外部依赖，适合初学者快速掌握，也足以支撑中等复杂度的交互需求。
