-1

当我按任意键时，我需要显示第一个 div“d1”其他隐藏，我再次按任意键显示第二个 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>

当我按任意键时，我需要显示第一个 div 然后我按任意键显示第二个 div ..直到第 6 个 div ..

如何在javascript中做到这一点？

4

2 回答 2

0 
<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>
于 2013-07-11T12:07:04.970 回答
0

试试这个

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% 未经测试，因为我无法访问任何小提琴自动取款机。

于 2013-07-11T11:36:45.883 回答