Question

当我按任意键我需要显示第一个div“d1”其他人隐藏并且我再次按任意键它显示secound div“d2”其他人隐藏并再次按任意键它显示第三个div“d3”其他隐藏..直到六个div ..再没有重复过程。

<div class="objects" id="d1">
    <img src="images/d1.jpg" />
</div>

<div class="objects" id="d2">
    <img src="images/d2.jpg" />
</div>

<div class="objects" id="d3">
    <img src="images/d3.jpg" />
</div>

....... 
.......

<div class="objects" id="d6">
    <img src="images/d6.jpg" />
</div>

当我按任意键我需要显示第1个div然后我按任意键显示第2个div ...还是第6个div ..

如何在javascript中执行此操作？

Answer 1

试试这个

var currentVisible = 0;
document.onkeyup = function() {
    // First hide all by class 'objects'
    // Requires IE9+ FF3+, others are supported
    var objs = document.getElementsByClassName('objects');
    for (var i=0; i<objs.length; i++) {
        objs[i].style.display = 'none';
    }
    // Show the one we are supposed to show
    if (++currentVisible == 7) 
        currentVisible = 1;
    var el = document.getElementById('d' + currentVisible);
    el.style.display = 'block';
}

100％未经测试，因为我无法访问任何小提琴。

Answer 2

<html>
<head>
<style type="text/css">
    .Div
    {
        display: none;
    }
</style>
<script type="text/javascript">



    var i = 0;
    function KeyHandler() {
        i++;
        var divs = document.getElementsByClassName("Div");

        for (var div = 0; div < divs.length - 1; div++) {

            divs[div].style.display = 'none';
        }
        var ele = document.getElementById("d" + i);
        ele.style.display = "block";

    }

</script>
</head>
<body onkeyup="KeyHandler()">
Press any key..
<div id="d1" class="Div">
    <h5>
        Div1</h5>
</div>
<div id="d2" class="Div">
    <h5>
        Div2</h5>
</div>
<div id="d3" class="Div">
    <h5>
        Div3</h5>
</div>
<div id="d4" class="Div">
    <h5>
        Div4</h5>
</div>
<div id="d5" class="Div">
    <h5>
        Div5</h5>
</div>
<div id="d6" class="Div">
    <h5>
        Div6</h5>
</div>
</body>
</html>

在按键显示上，一个div和其他应该隐藏

2 个答案: