假设有一本书，其中有多个章节(比如 5 章)。完整的书呈现在一个 html 页面中，其中包含所有 5 章。 每个 Chapter 都是一些 html 内容，并且存在于一个 div 中，其类名称为 Chapter。您可以为五个带有标签的页面中的每个页面采用任何虚拟 HTML 内容作为第 1 章、第 2 章......和第 5 章。
现在，当页面打开时，第一章会显示给用户。标题中有第一章。单章大于窗口的高度，因此用户可以滚动阅读本章。但是，一旦用户到达章节末尾，用户就无法看到或滚动到下一章。
当用户读完章节时，他会在右下角看到一个按钮，显示转到下一章。 Imp:- 该按钮不能是章节 HTML 的一部分，它必须通过 js 在章节末尾以编程方式生成。
当用户单击此按钮时，下一章(本例中为第 2 章)应自动从底部向上滚动，直到顶部将第一页推出窗口。因此，通过插入上面的第 1 章，整个屏幕应该被动画显示的第 2 章覆盖。
因此在给定时间用户只能通过向上或向下滚动看到一章。他必须单击按钮才能访问下一章或上一章。
与第 2 章类似，页面顶部会有一个按钮可转到第 1 章，其中第 1 章将从顶部将第 2 章完全推到窗口之外。对于第 2 章，页面底部还会有一个按钮，单击该按钮，用户将以类似的动画格式转到第 3 章。
这是用户在阅读书籍时进行的一种交互。
最佳答案
你不需要编写很多代码。尝试 jquery Accordion 插件 http://jqueryui.com/accordion/
关于javascript - jQuery 同时显示一个 div 并隐藏另一个 div。目的是浏览 5 div 的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16514493/