0

js を使用して段落を表示したいのですが、ユーザーが「右」ボタンをクリックして段落を表示するたびに、すべての段落が表示されます。ボタンがクリックされたときに次の段落を 1 つだけ表示できるように、ユーザーがボタンをクリックしたかどうかを確認するにはどうすればよいですか。事前にサンクス。

<style type="text/css">
p {
    border:1px solid black;
    width:100px;
    height:30px;
    display:none;
}
</style>

<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left"  />
<input type="button" value = "right" 
onclick = "
var p = document.getElementsByTagName('p');
for(var i = 0; i <p.length; i++){ 
show_paragraphs(i);}
" 
id = "right"/>
4

3 に答える 3

1

各パラグラフを繰り返し処理し、前のパラグラフが表示されているかどうかを確認する必要があります。表示されている場合は、前のパラメタと表示ブロックを現在のものと同じように表示なしに設定して戻ります。

ここにサンプルコードがあります

<html>
<style type="text/css">
p {
    border:1px solid black;
    width:100px;
    height:30px;
    display:none;
}
</style>

<p style="display:block">some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left"  />
<input type="button" value = "right" 
onclick = "navigate()" 
id = "right"/>
<script>
function navigate(){
var p = document.getElementsByTagName('p');
for(var i = 1; i <p.length; i++){ 
 if(  p[i-1].style.display == 'block')
  {
    p[i].style.display = 'block' ;
    p[i-1].style.display ='none';
    return;
  }
}
}
</script>
</html>
于 2013-06-08T11:20:51.583 に答える