我的 HTML 知识很少，所以这可能是一个非常琐碎的问题。非常感谢任何帮助！
当我使用 LaTeX beamer 类创建演示文稿时，有一个非常有用的命令：
\begin{itemize}
\item<x-> Alpha
\item<x-> Beta
\item<x-> Gamma
\end{itemize}
这会创建三个项目符号点，在鼠标单击或向前/向后箭头后递增显示，例如在 Powerpoint 中。
我想在 .html 文件中为很长的列表（可能超过 50 个项目）提供相同的功能。所以它真的不能在幻灯片环境中工作，而只能在浏览器中向下滚动。
有没有一种简单的方法可以通过 HTMl5 或 jQuery 或其他方式实现这一点？谷歌搜索抛出了数以千计的演示工具，我真的不知道从哪里开始。
【问题讨论】：
标签： jquery html presentation
使用 jQuery，您可以将 keypress 事件绑定到窗口，并在每次按下键时显示下一个列表项：
var curIndex = 0;
$(window).keypress(function() {
$("li").eq(curIndex).show();
curIndex++;
});
要使这项工作仅使用箭头键，需要稍作更改（您需要使用keydown 而不是keypress）：
var curIndex = 0;
$(window).keydown(function(e) {
if(e.keyCode === 37) {
if(curIndex > 0) curIndex--;
$("li").eq(curIndex).hide();
}
else if(e.keyCode === 39) {
$("li").eq(curIndex).show();
if(curIndex < 3) curIndex++;
}
});
您的 HTML 列表将如下所示：
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
默认情况下需要隐藏列表项，在 CSS 中使用 li { display:none } 之类的内容。
另请注意，上面的示例未处理显示最后一个元素的情况 - 您打算在这种情况下发生什么？
这里有一个example fiddle 展示了它的实际效果（您需要单击“结果”框架以使其获得焦点，然后按任意键来触发事件处理程序）。
【讨论】：