0

我想在 js 的帮助下显示段落，并且每次用户单击“右”按钮以显示段落时，我都希望显示所有段落。如何检查用户是否单击了按钮，以便在单击按钮时仅显示一个下一段。提前谢谢。

<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 回答
0

查看Content Swapper jQuery插件，它完全符合您的要求。

或者，如果您必须按照自己的方式进行操作，请修改以下代码以使其正常工作：

<!doctype html>
<html>
<head>

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

<script>
var i=0, paras = document.getElementsByTagName('p');

function hideAllPara() {
    for(var j=0; j<paras.length; j++) {
        paras[j].style.display = 'none'; 
    }
}
</script>

</head>

<body>

<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 = "hideAllPara(); paras[i].style.display = 'block'; i = (i < paras.length-1) ? i+1 : 0;" id = "right"/>

</body>
</html>

但您必须注意，绝不推荐使用内联点击事件或 JavaScript。

无论如何，所以基本上每次点击右键，首先我们需要隐藏所有段落，然后只显示需要的段落；为此，我们需要跟踪索引/指针，并在到达末尾时将其重置。

如果您希望在页面加载时显示一个段落，您可以在 CSS 中执行以下任何操作：

  1. p:first-child {显示：块；}
  2. p:nth-child() /* 指定您希望显示页面上所有选定段落的索引 */
  3. 给你想要显示的段落一个名为“active”的类名，并在 CSS 中声明它；p.active {显示：块；}
于 2013-06-08T10:45:01.927 回答
0

关于什么：

var left=document.getElementById("left");
var right=document.getElementById("right");

var show=function(){
    var paragraphs=document.getElementsByTagName("p");
    var current=0;
    var len=paragraphs.length;
    return function(event){
        var button=event.target.id;
        var direction=0;
        var visi="visible";
        if(button==="left"){
            visi="hidden";
            direction=(current>0)?-1:0;
        } else {
            direction=(current<len-1)?1:0;
        }
        paragraphs[current].style.visibility=visi;
        current+=direction;
    };
}();

left.addEventListener("click", show);
right.addEventListener("click", show);

jsFiddle

于 2013-06-08T13:17:36.127 回答