javascript - 如何使用javascript显示div多步？

如何使用javascript显示div多步？

我想为

创建代码

点击CLICK HERE第一次显示one

点击CLICK HERE第二次显示two

点击CLICK HERE第三次显示three

点击CLICK HERE第四次显示four

点击CLICK HERE第五次显示five

http://jsfiddle.net/x53eh96o/

<style type="text/css">
    div{
    display: none;
}
  </style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
function myFunction() {
    document.getElementById("1").style.display = "block";
}
</script>

我该怎么做？

谢谢你

最佳答案：

2 个答案:

答案 0 :(得分：1)

首先，最好在div中添加一个公共类，以便更容易选择。然后，您应该按类名选择所有需要的div，并通过每个div，设置所需的可见性。

http://jsfiddle.net/x53eh96o/7/

<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var i = 0;
    function myFunction() {
        var divs = document.getElementsByClassName("some_class");
        var divsLength = divs.length;
        for(var j = divsLength; j--;) {
            var div = divs[j];              
            div.style.display = (i == j ? "block" : "none"); 
        }          
        i  ;
        if(i > divsLength) {
            i = 0; // for a cycle
        }

    }
</script>

<强>更新

以下是html" class="superseo">jquery示例：http://jsfiddle.net/x53eh96o/8/

<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var i = 0;
    function myFunction() {
        var divs = $(".some_class");
        divs.hide().eq(i).css({display: 'block'});       
        i  ;
        if(i > divs.length) {
            i = 0;
        }
    }
</script>

答案 1 :(得分：0)

id值不应以数字开头。

＆＃13; ＆＃13;

div {
  display: none;
}

＆＃13;

<div id="show_1">one</div>
<div id="show_2">two</div>
<div id="show_3">three</div>
<div id="show_4">four</div>
<div id="show_5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
  var show = 0;

  function myFunction() {
    try {
      document.getElementById('show_'     show).style.display = "block";
    } catch (err) {
      show--
      for (i = show; i > 0; i--) {
        document.getElementById('show_'   i).style.display = "none";
        show--;
      }
    }

  }
</script>

＆＃13; ＆＃13; ＆＃13;