HTML5またはjQueryのインクリメンタルな箇条書きポイント？

Question

私はHTMLの知識がほとんどないので、これはおそらく非常に些細な質問です。私は本当に助けていただければ幸いです！

私はLaTeXのビーマークラスでプレゼンテーションを作成していたときに非常に便利なコマンドがあります：

\begin{itemize} 
\item<x-> Alpha 
\item<x-> Beta 
\item<x-> Gamma 
\end{itemize} 

これは、例えばマウスクリックまたはPowerPointのように、前方/後方の矢印の後にインクリメンタルに表示される3つの箇条書きを作成します。

私は非常に長いリストのために.htmlファイルに同じ機能を持たせたいと思います。したがって、実際にはスライド環境では機能しませんが、スクロールするだけでブラウザでのみ機能します。

これをHTMl5やjQueryなどで簡単に実現する方法はありますか？グーグルは何千ものプレゼンテーションツールを投げつけています。どこから始めるべきかわかりません。 jQueryを使って

Answer 1

あなたがウィンドウにkeypressイベントをバインドし、次のリスト項目にキーが押されるたびに示すことができた：

var curIndex = 0; 
$(window).keypress(function() { 
    $("li").eq(curIndex).show(); 
    curIndex++; 
}); 

矢印キーだけでこの作業を行うためには、若干の変更があります（あなたの代わりに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リストは次のようになります：

を

CSSでli { display:none }のようなものを使用して、リスト項目をデフォルトで非表示にする必要があります。

また、上記の例では、最後の要素が表示されている場合を処理しないことに注意してください。この場合、何をする予定ですか？

これは実際に動作していることを示すexample fiddleです（フォーカスを与えるには「結果」フレームをクリックしてから、任意のキーを押してイベントハンドラを起動する必要があります）。